Generics di Ty­pe­Script: come creare modelli di codice riu­ti­liz­za­bi­li

I generics di Ty­pe­Script servono a generare codice riu­ti­liz­za­bi­le e sicuro rispetto al tipo. Questo sistema può essere applicato a funzioni, classi, in­ter­fac­ce e tipi, ma non solo.

Che cosa sono i generics di Ty­pe­Script?

In quasi ogni lin­guag­gio di pro­gram­ma­zio­ne sono di­spo­ni­bi­li strumenti che per­met­to­no agli utenti di creare modelli di codice da riu­ti­liz­za­re nel corso della pro­gram­ma­zio­ne o in altri progetti. L’obiettivo non è soltanto ri­spar­mia­re tempo, ma anche creare codice sicuro che si possa integrare per­fet­ta­men­te in nuovi ambienti. In questo modo è possibile scrivere e replicare diversi com­po­nen­ti, funzioni e strutture dati complete senza perdere la loro sicurezza rispetto al tipo. In Ty­pe­Script questi compiti sono affidati ai co­sid­det­ti generics. In tal modo è possibile tra­smet­te­re i tipi, sotto forma di parametri, ad altri tipi, funzioni o altre strutture dati.

Esempio di sintassi e fun­zio­na­men­to

La base per lavorare con i generics di Ty­pe­Script sono le variabili generiche. Queste fungono da se­gna­po­sti per indicare il tipo di dati da di­chia­ra­re in un secondo momento. All’interno del codice sono con­tras­se­gna­te con una lettera maiuscola a piacere. Durante la creazione del codice, queste variabili sono scritte tra parentesi angolari. As­se­gnan­do loro il nome del tipo vero e proprio, la funzione Ty­pe­Script, l’in­ter­fac­cia o la classe Ty­pe­Script de­si­de­ra­te prendono il posto del se­gna­po­sto. Questo se­gna­po­sto è detto anche parametro Type. È anche possibile inserire diversi parametri Type all’interno delle parentesi. Quello che segue è un semplice esempio per conoscere la sintassi dei generics di Ty­pe­Script:

function FunzioneEsempio <T>(parameter1: T): void {
    console.log(`Il tipo di dati del parametro ${parameter1} è: ${typeof parameter1}`)
}

Qui uti­liz­zia­mo il nome della funzione (“Fun­zio­neE­sem­pio”) per definire la variabile generica “T”. Nel codice seguente di­chia­ria­mo questa variabile come stringa:

FunzioneEsempio<string>("Qui è presente una stringa.");

Se ora as­se­gnia­mo il valore del parametro string alla funzione, otteniamo il seguente risultato:

Il tipo di dati del parametro Qui è presente una stringa. è: string

I generics di Ty­pe­Script con due variabili

I generics di Ty­pe­Script fun­zio­na­no in modo simile anche quando si uti­liz­za­no due o più variabili generiche come se­gna­po­sti. Nell’esempio seguente definiamo le variabili “T” e “U” come tipi per i parametri “parameter1” e “parameter2“. I due parametri sono separati da una virgola:

function FunzioneEsempio<T, U>(parameter1: T, parameter2: U): string {
    return JSON.stringify({parameter1, parameter2});
}

Ora as­se­gnia­mo i tipi di dati e i valori ai due se­gna­po­sti. In questo caso uti­liz­zia­mo i tipi di dati number e string nonché i valori “11” e “giocatori”. Il codice per farlo è il seguente:

const str = FunzioneEsempio<number, string>(11, "giocatori");
console.log(str);

Esempi di classi ri­pro­du­ci­bi­li

Puoi uti­liz­za­re i generics di Ty­pe­Script anche per creare classi ri­pro­du­ci­bi­li. Nell’esempio seguente uti­liz­zia­mo i generics per chiedere al sistema di re­sti­tui­re un numero. Il codice per farlo è il seguente:

class ValoreNumerico<T> {
    private _value: T | undefined;
    constructor(private name: string) {}
    public setValue(value: T) {
        this._value = value;
    }
    public getValue(): T | undefined {
        return this._value;
    }
    public toString(): string {
        return `${this.name}: ${this._value}`;
    }
}
let value = new ValoreNumerico<number>('mioNumero');
value.setValue(11);
console.log(value.toString());

In questo modo otteniamo il seguente output:

mioNumero: 11

Na­tu­ral­men­te questo principio funziona anche con altri tipi di dati e con più variabili generiche. L’esempio seguente lo dimostra:

class ClasseEsempio<T, U> {
nome: T;
cognome: U;
constructor(nome: T, cognome: U) {
	this.nome = nome;
	this.cognome = cognome;
	}
}

A questo punto, as­se­gnia­mo il tipo di dati String e i valori previsti a ciascuna variabile:

const person1 = new ClasseEsempio<string, string>("Giulia", "Rossi");
console.log(`${person1.nome} ${person1.cognome}`)

Questa volta otteniamo il seguente risultato:

Giulia Rossi

Se desideri combinare diversi tipi di dati, procedi come nell’esempio seguente:

class ClasseEsempio<T, U> {
numero: T;
parola: U;
constructor(numero: T, parola: U) {
	this.numero = numero;
	this.parola = parola;
	}
}

Ai se­gna­po­sti vengono ora assegnati i tipi di dati number e string, nonché i relativi valori:

const combinazione = new ClasseEsempio<number, string>(11, "giocatori");
console.log(`${combinazione.numero} ${combinazione.parola}`);

Il risultato è il seguente:

11 giocatori

Utilizzo con in­ter­fac­ce

Anche per le in­ter­fac­ce è possibile e ad­di­rit­tu­ra con­si­glia­to uti­liz­za­re i generics di Ty­pe­Script. La procedura è simile alla di­chia­ra­zio­ne di una classe:

interface Interfaccia<T> {
	valore: T;
}

Quindi im­ple­men­tia­mo l’in­ter­fac­cia nella classe “Clas­seE­sem­pio”. A tal fine as­se­gnia­mo il tipo di dati string alla variabile “T”:

class ClasseEsempio implements Interfaccia<string> {
	valore: string = "Questo è un esempio con un'interfaccia";
}
const output = new ClasseEsempio();
console.log(output.valore)

Il nostro output è quindi simile al seguente:

Questo è un esempio con un'interfaccia

Creazione di array generici

È possibile uti­liz­za­re i generics di Ty­pe­Script anche per gli array di Ty­pe­Script. A seguire trovi un semplice esempio di codice che utilizza la funzione reverse per invertire l’ordine dei numeri in un array:

function reverse<T>(array: T[]): T[] {
    return array.reverse();
}
let numeri: number[] = [10, 7, 6, 13, 9];
let NuovoOrdine: number[] = reverse(numeri);
console.log(NuovoOrdine);

Otteniamo il seguente risultato:

[9, 13, 6, 7, 10]

Generics di Ty­pe­Script per tipi con­di­zio­na­li

Infine, ti mostriamo anche come uti­liz­za­re i tipi che pre­sen­ta­no una con­di­zio­ne per mezzo dei generics di Ty­pe­Script. Il risultato cambia a seconda che una con­di­zio­ne sia sod­di­sfat­ta o meno. Nell’esempio seguente, questo requisito deve essere il tipo di dati string. Il relativo codice è il seguente:

type QuestaèunaStringa<T> = T extends string ? true : false;
type A = "esempio";
type B = {
	nome: string;
};
type PrimoRisultato = QuestaèunaStringa<A>;
type SecondoRisultato = QuestaèunaStringa<B>;

In type A si trova quindi la stringa “esempio”, mentre con type B è indicato un oggetto con una proprietà “nome” e il tipo di dati string. In­di­chia­mo quindi questi due tipi come “Pri­mo­Ri­sul­ta­to” e “Se­con­do­Ri­sul­ta­to”. Se poi andiamo a ve­ri­fi­ca­re questi due tipi, troviamo che “Pri­mo­Ri­sul­ta­to” riceve come stringa il valore true, mentre “Se­con­do­Ri­sul­ta­to” rimane false.