Génériques TypeScript : guide complet et exemples

Introduction aux génériques

Les génériques en TypeScript permettent de créer du code réutilisable en définissant une "forme" d'entrée sans spécifier le type exact au moment du statique.

// Sans génériques : perte de type function identity(x: any): any { return x; } const result = identity('test'); // type = any ❌ // Avec génériques : type preservé function identity<T>(x: T): T { return x; } const result = identity('test'); // type = string ✓

Syntaxe basique

// <T> = type parameter function getValue<T>(item: T): T { return item; } const str = getValue<string>('hello'); // string const num = getValue<number>(42); // number const arr = getValue<Array<number>>([1, 2, 3]); // Array<number>

Constraints et littéraux

// Constraint : T extends Type interface Lengthwise { length: number; } function printLength<T extends Lengthwise>(x: T): number { return x.length; } printLength('string'); // ✓ printLength([1, 2, 3]); // ✓ printLength(42); // ✗ Error

Multiples paramètres génériques

function pair<T, U>(a: T, b: U): [T, U] { return [a, b]; } const result = pair('hello', 42); // [string, number]

Fonctions génériques

function filter<T>(arr: T[], predicate: (item: T) => boolean): T[] { return arr.filter(predicate); } const numbers = [1, 2, 3, 4, 5]; const evens = filter(numbers, n => n % 2 === 0); // [2, 4]

Classes génériques

class Stack<T> { private items: T[] = []; push(item: T): void { this.items.push(item); } pop(): T | undefined { return this.items.pop(); } } const stack = new Stack<number>(); stack.push(1); stack.push(2);

Patterns avancés

// Keyof constraint function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } const person = { name: 'Alice', age: 25 }; getProperty(person, 'name'); // ✓ string getProperty(person, 'email'); // ✗ Error