Ty­peS­cript Generics : comment créer des modèles de code réu­ti­li­sables ?

Les gé­né­riques Ty­peS­cript sont utilisés pour générer du code réu­ti­li­sable et conforme au type. Le système s’applique entre autres aux fonctions, classes, in­ter­faces et alias de types.

Les Ty­peS­cript Generics, c’est quoi ?

Dans presque tous les langages de pro­gram­ma­tion, il existe des outils qui per­met­tent aux uti­li­sa­teurs de créer des modèles de code qui peuvent être réu­ti­li­sé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 par­fai­te­ment dans de nouveaux en­vi­ron­ne­ments. Dif­fé­rents com­po­sants, fonctions et struc­tures de données complètes peuvent être écrits et répliqués de cette manière, sans perdre leur sécurité de type. Dans Ty­peS­cript, ces tâches sont ef­fec­tuées à l’aide de gé­né­riques. Les types peuvent ainsi être transmis en tant que pa­ra­mètres à d’autres types, fonctions ou struc­tures de données.

Syntaxe et fonc­tion­ne­ment à l’aide d’un exemple simple

Les variables gé­né­riques cons­ti­tuent la base du travail avec les Ty­peS­cript Generics. Celles-ci fonc­tion­nent comme des repères et indiquent le type de données qui doit être déclaré ul­té­rieu­re­ment. Dans le code, on les identifie avec une lettre majuscule quel­conque. Lors de la création du code, ces variables sont placées entre pa­ren­thèses pointues. On leur attribue le nom de type réel, de sorte que la fonction Ty­peS­cript, l’interface ou la classe Ty­peS­cript 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 pa­ra­mètres de type à l’intérieur d’une pa­ren­thèse. La syntaxe des Ty­peS­cript Generics est re­pré­sen­té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 ca­rac­tères) :

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

Si nous at­tri­buons main­te­nant 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

Ty­peS­cript Generics à deux variables

Les Ty­peS­cript Generics fonc­tion­nent 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 pa­ra­mè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 at­tri­buons main­te­nant des types de données et des valeurs aux deux ca­rac­tères gé­né­riques de rem­pla­ce­ment ; à savoir, dans ce cas, les types de données number et string ainsi que les valeurs « 11 » et « Joueurs ». Voici le code cor­res­pon­dant :

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

Exemples de classes re­pro­duc­tibles

Si vous souhaitez utiliser des Ty­peS­cript Generics pour créer des classes re­pro­duc­tibles, c’est possible. Dans l’exemple suivant, nous utilisons des gé­né­riques pour faire afficher un nombre. Voici le code cor­res­pon­dant :

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 fonc­tionne 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 at­tri­buons main­te­nant à 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 dif­fé­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;
	}
}

Main­te­nant, les types de données number et string ainsi que leurs valeurs sont attribués aux ca­rac­tères de rem­pla­ce­ment :

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

Le résultat est le suivant :

11 Joueurs

Uti­li­sa­tion avec des in­ter­faces

L’uti­li­sa­tion de Ty­peS­cript Generics est possible et même re­com­man­dée pour les in­ter­faces. La procédure est similaire à celle de la dé­cla­ra­tion d’une classe :

interface Interface<T> {
	valeur: T;
}

Nous im­plé­men­tons main­te­nant l’interface dans la classe « Clas­seExemple ». Nous at­tri­buons à 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 Ty­peS­cript Generics pour les Ty­peS­cript 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]

Ty­peS­cript Generics pour les types con­di­tion­nels

Pour finir, penchons-nous sur l’uti­li­sa­tion de types con­di­tion­nels avec Ty­peS­cript 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 cor­res­pon­dant :

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 « Pre­mier­Ré­sul­tat » et « Deuxiè­me­Ré­sul­tat ». Si nous vérifions ensuite les deux types, nous cons­ta­tons que « Pre­mier­Ré­sul­tat » reçoit la valeur True en tant que string, tandis que « Deuxiè­me­Ré­sul­tat » reste False.