Les types génériques sont l’un des outils les plus puissants de TypeScript. Ils permettent de créer du code réutilisable, fortement typé et plus sûr, tout en conservant la flexibilité de JavaScript. Cet article vous propose une introduction claire aux génériques, avec des exemples concrets et progressifs.

Pourquoi utiliser des génériques ?

Imaginons une fonction simple d'identité :

function identity(value: any): any {

return value;

}

Elle fonctionne, mais elle perd l'information de type. Si vous lui passez un number, elle pourrait vous renvoyer un string, et TypeScript ne s’en plaindrait pas.

Avec un type générique, vous pouvez garder la nature du type en entrée et en sortie :

function identity<T>(value: T): T {

return value;

}

Appels :

identity<number>(5); // renvoie un nombre

identity<string>("test"); // renvoie une chaîne

Syntaxe de base:

function nomFonction<T>(parametre: T): T

T est un type générique, souvent nommé avec une lettre majuscule (T, U, K, V, etc.).

Il peut être utilisé dans les paramètres, le retour, ou même à l'intérieur de la fonction.

Exemples pratiques:

1. Liste générique:

function getFirstElement<T>(arr: T[]): T {

return arr[0];

}

getFirstElement<string>(["a", "b"]); // string

getFirstElement<number>([1, 2]); // number

2. Objet avec type générique:

function merge<T, U>(obj1: T, obj2: U): T & U {

return { ...obj1, ...obj2 };

}

const result = merge({ name: "Toto" }, { age: 30 });

// result: { name: string, age: number }

Contraintes sur les génériques:

Vous pouvez restreindre les types autorisés avec extends :

function logLength<T extends { length: number }>(item: T): void {

console.log(item.length);

}

logLength("hello"); // OK

logLength([1, 2, 3]); // OK

logLength(42); // Erreur : number n’a pas de propriété `length`

Génériques avec interfaces:

interface ApiResponse<T> {

data: T;

error?: string;

}

const userResponse: ApiResponse<{ id: number; name: string }> = {

data: { id: 1, name: "Alice" },

};

Attention aux abus:

N’utilisez pas des génériques si le type est fixe.

Trop de types imbriqués, peuvent nuire à la lisibilité.

Conclusion:

Les types génériques sont une clé de voûte pour écrire du code modulaire, réutilisable et typé en TypeScript. En les maîtrisant, vous gagnez en productivité, en sécurité et en maintenabilité.