Generics en TypeScript : guide complet pour débutants

Generics en TypeScript : pourquoi les utiliser et comment

TypeScript est un outil puissant qui ajoute un typage statique à JavaScript. Cependant, si vous commencez tout juste à apprendre TypeScript, vous avez peut-être rencontré des situations où vous devez écrire le même code pour différents types de données. C'est là que les Generics (types génériques) viennent à la rescousse. Dans cet article, nous allons voir ce que sont les Generics, pourquoi ils sont nécessaires et comment les utiliser en pratique.

Que sont les Generics et pourquoi sont-ils importants ?

Les Generics sont un mécanisme de TypeScript qui permet de créer des composants (fonctions, classes, interfaces) fonctionnant avec différents types de données, plutôt qu'avec un seul type spécifique. Imaginez que vous écriviez une fonction qui doit fonctionner à la fois avec des nombres, des chaînes de caractères et des tableaux. Sans les génériques, vous devriez soit utiliser le type any (ce qui tue tout l'intérêt de TypeScript), soit créer plusieurs copies de la même fonction.

Les principaux avantages des Generics :

• Sécurité de typage — vous conservez un typage strict tout en gardant un code flexible.
• Réutilisabilité du code — une seule fonction ou classe peut fonctionner avec différents types.
• Lisibilité — le code devient plus compréhensible et auto-documenté.

Syntaxe de base des Generics

Commençons par l'exemple le plus simple. Supposons que nous ayons besoin d'une fonction qui retourne l'argument qui lui est passé. Sans Generics, nous écririons ceci :

function identity(arg: number): number {    return arg;}

Mais que faire si nous devons passer une chaîne de caractères ? Il faudrait créer une nouvelle fonction. Avec les Generics, nous faisons ceci :

function identity<T>(arg: T): T {    return arg;}

// Utilisation :let output1 = identity<string>("Bonjour");let output2 = identity<number>(42);let output3 = identity<boolean>(true);

Ici, <T> est un paramètre de type (ou variable de type). Lorsque nous appelons la fonction, TypeScript substitue automatiquement le type approprié. Vous pouvez utiliser n'importe quelle lettre : T, U, V ou même des noms explicites comme Type.

D'ailleurs, TypeScript peut déduire le type lui-même, donc on peut souvent écrire sans spécification explicite :

let output = identity("Bonjour"); // TypeScript comprend automatiquement que T = string

Travailler avec des tableaux et plusieurs types

L'une des utilisations les plus courantes des Generics est le travail avec les tableaux. Supposons que nous voulions écrire une fonction qui prend un tableau et retourne le premier élément :

function getFirstElement<T>(arr: T[]): T | undefined {    return arr[0];}

const numbers = [1, 2, 3];const firstNumber = getFirstElement(numbers); // type number | undefined

const strings = ["a", "b", "c"];const firstString = getFirstElement(strings); // type string | undefined

Remarquez que nous avons utilisé T[] — c'est la même chose que Array<T>. Et si la fonction accepte deux types différents ? Facile !

function merge<T, U>(obj1: T, obj2: U): T & U {    return { ...obj1, ...obj2 };}

const result = merge({ name: "Anna" }, { age: 25 });// result a le type { name: string; } & { age: number; }// En réalité : { name: string; age: number; }

Contraintes des Generics

Parfois, il est nécessaire que le générique fonctionne non pas avec n'importe quel type, mais uniquement avec ceux qui possèdent certaines propriétés. Pour cela, on utilise des contraintes avec le mot-clé extends.

Par exemple, nous voulons écrire une fonction qui obtient la longueur d'un objet. Évidemment, tous les types n'ont pas une propriété length. Vérifions cela :

function getLength<T extends { length: number