Generics en TypeScript : guide complet d'utilisation

Introduction aux Generics TypeScript

TypeScript est un langage de programmation fortement typé qui ajoute un typage statique à JavaScript. L'une des fonctionnalités les plus puissantes et souvent sous-estimées de TypeScript sont les Generics (génériques, types génériques). Si vous avez déjà écrit une fonction qui doit fonctionner avec différents types de données, ou créé un composant qui doit être universel, alors les Generics sont exactement ce qu'il vous faut.

Dans cet article, nous allons détailler ce que sont les génériques en TypeScript, pourquoi ils sont nécessaires et comment les utiliser en pratique. Vous apprendrez à rendre votre code plus flexible, plus sûr et plus réutilisable.

Que sont les Generics et pourquoi en a-t-on besoin ?

Les Generics (types génériques) sont un mécanisme qui permet de créer des composants (fonctions, classes, interfaces) fonctionnant avec différents types de données, sans perdre l'information sur le type. Imaginez que vous écrivez une fonction qui retourne le premier élément d'un tableau. Sans génériques, vous devriez utiliser le type any, ce qui vous prive des avantages du typage strict.

Pourquoi utiliser les Generics ?

• Sécurité des types : TypeScript vérifie les types à la compilation, évitant les erreurs.
• Réutilisation du code : Une seule fonction ou classe peut fonctionner avec n'importe quel type de données.
• Amélioration de la lisibilité : Le code devient plus clair et auto-documenté.
• Réduction de la duplication : Vous n'avez pas besoin d'écrire des fonctions séparées pour chaque type de données.

Sans Generics, vous écririez quelque chose comme ceci :

// Mauvais : on perd l'information sur le typefunction getFirstElement(arr: any[]): any {  return arr[0];}

const num = getFirstElement([1, 2, 3]); // Type anyconsole.log(num.toUpperCase()); // Erreur à l'exécution !

Avec les Generics, le code devient sûr et flexible :

// Bon : on conserve le typefunction getFirstElement<T>(arr: T[]): T | undefined {  return arr[0];}

const num = getFirstElement([1, 2, 3]); // Type numberconst str = getFirstElement(['a', 'b', 'c']); // Type string

// num.toUpperCase(); // Erreur de compilation ! number n'a pas de méthode toUpperCase

Bases de la syntaxe des Generics

Syntaxe avec les chevrons

Les Generics utilisent des chevrons <> pour spécifier les paramètres de type. Généralement, les paramètres sont désignés par une seule lettre : T (Type), U, V, etc. Cependant, vous pouvez utiliser n'importe quel nom significatif.

// Exemple très simple : fonction avec un paramètre de typefunction identity<T>(arg: T): T {  return arg;}

// Spécification explicite du typelet result1 = identity<string>('Hello');

// Inférence de type (TypeScript détermine le type lui-même)let result2 = identity(42); // Type number

Plusieurs paramètres de type

Vous pouvez utiliser plusieurs paramètres de type dans une même fonction ou classe :

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

const merged = merge({ name: 'John' }, { age: 30 });// Type : { name: string } & { age: number }console.log(merged.name); // Johnconsole.log(merged.age);  // 30

Contraintes (Constraints)

Parfois, il est nécessaire de limiter les types qui peuvent être passés à un générique. Pour cela, on utilise le mot-clé extends :

interface HasLength {  length: number;}

// La fonction fonctionne uniquement avec les types qui ont une propriété lengthfunction logLength<T extends HasLength>(arg: T): T {  console.log(arg.length);  return arg;}

logLength('Hello'); // Fonctionne : 5logLength([1, 2, 3]); // Fonctionne : 3// logLength(123); // Erreur ! number n'a pas de length

Application des Gen