# 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quel-langage-de-programmation-apprendre/), 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/typescript-functions/), l’interface ou la [classe TypeScript](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/typescript-classes/) 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 : ```typescript function ExempleDeFonction(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) : ```typescript ExempleDeFonction("Ici se trouve un string."); ``` Si nous attribuons maintenant la valeur de paramètre `string` à la fonction, nous obtenons le résultat suivant : ```typescript 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 : ```typescript function ExempleDeFonction(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 : ```typescript const str = ExempleDeFonction(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 : ```typescript class ValeurNumérique { 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('monNombre'); value.setValue(11); console.log(value.toString()); ``` Vous obtenez ainsi le résultat suivant : ```typescript 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 : ```typescript class ClasseExemple { 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 : ```typescript const person1 = new ClasseExemple("Julie", "Rault"); console.log(`${person1.prénom} ${person1.nom}`) ``` Cette fois, le résultat est : ```typescript Julie Rault ``` Si vous souhaitez combiner différents types de données, procédez comme suit : ```typescript class ClasseExemple { 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 : ```typescript const combinaison = new ClasseExemple(11, "Joueurs"); console.log(`${combinaison.nombre} ${ combinaison.mot}`); ``` Le résultat est le suivant : ```typescript 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 : ```typescript interface Interface { valeur: T; } ``` Nous implémentons maintenant l’interface dans la classe « ClasseExemple ». Nous attribuons à la variable « T » le type de données `string` : ```typescript class ClasseExemple implements Interface { valeur: string = "Ceci est un exemple avec une interface"; } const valeur = new ClasseExemple(); console.log(valeur.valeur) ``` Le résultat est le suivant : ```typescript 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/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 : ```typescript function reverse(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 : ```typescript [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 : ```typescript type EstCeUnString = T extends string ? true : false; type A = "Exemple"; type B = { name: string; }; type PremierRésultat = EstCeUnString; type SecondRésultat = EstCeUnString; ``` 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`. Conseil Déploiement directement via GitHub : [Deploy Now](https://www.ionos.fr/hebergement/deploy-now "Deploy Now de IONOS") IONOS est un excellent choix pour les sites Internet et les applications grâce à la détection automatique du framework, à une installation rapide et à une évolutivité optimale. Choisissez le tarif le mieux adapté à votre projet ! This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/typescript-generics/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/typescript-generics/) for AI/LLM consumption.