TypeScript Generics : comment créer des modèles de code réutilisables ?

Les génériques TypeScript sont utilisés pour générer du code réutilisable et conforme au type. Le système s’applique entre autres aux fonctions, classes, interfaces et alias de types.

Les TypeScript Generics, c’est quoi ?

Dans presque tous les langages de programmation, il existe des outils qui permettent aux utilisateurs de créer des modèles de code qui peuvent être réutilisés plus tard ou dans d’autres projets. L’objectif n’est pas seulement de gagner du temps, mais aussi de créer un code sûr qui s’intègre parfaitement dans de nouveaux environnements. Différents composants, fonctions et structures de données complètes peuvent être écrits et répliqués de cette manière, sans perdre leur sécurité de type. Dans TypeScript, ces tâches sont effectuées à l’aide de génériques. Les types peuvent ainsi être transmis en tant que paramètres à d’autres types, fonctions ou structures de données.

Syntaxe et fonctionnement à l’aide d’un exemple simple

Les variables génériques constituent la base du travail avec les TypeScript Generics. Celles-ci fonctionnent comme des repères et indiquent le type de données qui doit être déclaré ultérieurement. Dans le code, on les identifie avec une lettre majuscule quelconque. Lors de la création du code, ces variables sont placées entre parenthèses pointues. On leur attribue le nom de type réel, de sorte que la fonction TypeScript, l’interface ou la classe TypeScript souhaitée remplace le caractère générique. Ce paramètre fictif, ce repère, est aussi appelé « paramètre de type ». Il est possible de placer plusieurs de ces paramètres de type à l’intérieur d’une parenthèse. La syntaxe des TypeScript Generics est représentée dans cet exemple simple :

function ExempleDeFonction<T>(parameter1: T): void {
    console.log(`Le type de données du paramètre ${parameter1} est : ${typeof parameter1}`)
}

Nous utilisons ici le nom de la fonction (« Exemple de fonction ») pour définir la variable générique « T ». Dans le code suivant, nous déclarons cette variable comme string (chaîne de caractères) :

ExempleDeFonction<string>("Ici se trouve un string.");

Si nous attribuons maintenant la valeur de paramètre string à la fonction, nous obtenons le résultat suivant :

Le type de données du paramètre Ici se trouve un string. est : string

TypeScript Generics à deux variables

Les TypeScript Generics fonctionnent de manière très similaire lorsque deux ou plusieurs variables génériques sont utilisées comme paramètre fictif. Dans l’exemple suivant, nous déposons les variables « T2 » et « U » comme types pour les paramètres « parameter1 » et « parameter2 ». Elles sont séparées par une virgule :

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

Nous attribuons maintenant des types de données et des valeurs aux deux caractères génériques de remplacement ; à savoir, dans ce cas, les types de données number et string ainsi que les valeurs « 11 » et « Joueurs ». Voici le code correspondant :

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

Exemples de classes reproductibles

Si vous souhaitez utiliser des TypeScript Generics pour créer des classes reproductibles, c’est possible. Dans l’exemple suivant, nous utilisons des génériques pour faire afficher un nombre. Voici le code correspondant :

class ValeurNumérique<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 ValeurNumérique<number>('monNombre');
value.setValue(11);
console.log(value.toString());

Vous obtenez ainsi le résultat suivant :

monNombre: 11

Le principe fonctionne bien sûr aussi avec d’autres types de données et plusieurs variables génériques, comme le montre l’exemple ci-dessous :

class ClasseExemple<T, U> {
prénom: T;
nom: U;
constructor(prénom: T, nom: U) {
	this.prénom = prénom;
	this.nom = nom;
	}
}

Nous attribuons maintenant à chacune des variables le type de données String et les valeurs prévues :

const person1 = new ClasseExemple<string, string>("Julie", "Rault");
console.log(`${person1.prénom} ${person1.nom}`)

Cette fois, le résultat est :

Julie Rault

Si vous souhaitez combiner différents types de données, procédez comme suit :

class ClasseExemple<T, U> {
nombre: T;
mot: U;
constructor(nombre: T, mot: U) {
	this.nombre = nombre;
	this.mot = mot;
	}
}

Maintenant, les types de données number et string ainsi que leurs valeurs sont attribués aux caractères de remplacement :

const combinaison = new ClasseExemple<number, string>(11, "Joueurs");
console.log(`${combinaison.nombre} ${ combinaison.mot}`);

Le résultat est le suivant :

11 Joueurs

Utilisation avec des interfaces

L’utilisation de TypeScript Generics est possible et même recommandée pour les interfaces. La procédure est similaire à celle de la déclaration d’une classe :

interface Interface<T> {
	valeur: T;
}

Nous implémentons maintenant l’interface dans la classe « ClasseExemple ». Nous attribuons à la variable « T » le type de données string :

class ClasseExemple implements Interface<string> {
	valeur: string = "Ceci est un exemple avec une interface";
}
const valeur = new ClasseExemple();
console.log(valeur.valeur)

Le résultat est le suivant :

Ceci est un exemple avec une interface

Créer des tableaux génériques

Il est également possible de faire appel aux TypeScript Generics pour les TypeScript Arrays. Voici un exemple simple de code dans lequel est utilisée la fonction reverse pour inverser l’ordre des nombres d’un tableau :

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

On obtient alors le résultat suivant :

[9, 13, 6, 7, 10]

TypeScript Generics pour les types conditionnels

Pour finir, penchons-nous sur l’utilisation de types conditionnels avec TypeScript Generics. Le résultat change en fonction qu’une condition soit remplie ou non. Dans l’exemple suivant, cette condition est le type de données string. Voici le code correspondant :

type EstCeUnString<T> = T extends string ? true : false;
type A = "Exemple";
type B = {
	name: string;
};
type PremierRésultat = EstCeUnString<A>;
type SecondRésultat = EstCeUnString<B>;

Le type A est donc le string « exemple », tandis que le type B est un objet avec la propriété « nom » et le type de données string. Ces deux types sont ensuite consignés comme « PremierRésultat » et « DeuxièmeRésultat ». Si nous vérifions ensuite les deux types, nous constatons que « PremierRésultat » reçoit la valeur True en tant que string, tandis que « DeuxièmeRésultat » reste False.