Génériques TypeScript avec exemples

Les génériques TypeScript sont une fonctionnalité puissante qui vous permet de créer des composants réutilisables et sûrs en termes de types. Les génériques permettent de créer des classes, des fonctions et des interfaces qui fonctionnent avec une variété de types tout en maintenant une sécurité de type élevée. Cet article vous présentera les génériques et vous montrera comment les utiliser à l'aide d'exemples pratiques.

Comprendre les génériques

Les génériques vous permettent de définir un composant avec un espace réservé pour le type sur lequel il opère. Au lieu de spécifier un type concret, vous utilisez un paramètre de type générique qui peut être remplacé par n'importe quel type lorsque le composant est utilisé.

Syntaxe de base

La syntaxe de base pour définir un type générique consiste à utiliser des crochets angulaires <> avec un nom de paramètre de type. Voici un exemple simple:

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

Dans cet exemple, identity est une fonction générique qui prend un paramètre value de type T et renvoie une valeur du même type. Le paramètre de type T est remplacé par le type réel lorsque la fonction est appelée.

Génériques avec classes

Les génériques peuvent également être utilisés avec des classes pour créer des structures de données flexibles et réutilisables. Voici un exemple de classe générique:

class Box {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

Dans cet exemple, la classe Box est définie avec un paramètre de type générique T. La classe possède une propriété privée value de type T et une méthode getValue qui renvoie la valeur de type T.

Génériques avec interfaces

Les génériques peuvent être utilisés avec des interfaces pour créer des interfaces flexibles et sécurisées. Voici un exemple:

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

Dans cet exemple, l'interface Pair est définie avec deux paramètres de type générique T et U. L'interface représente une paire de valeurs de types T et U, respectivement.

Génériques dans les fonctions

Les génériques peuvent être utilisés dans les fonctions pour gérer plusieurs types tout en préservant la sécurité des types. Voici un exemple de fonction générique qui fonctionne avec des tableaux:

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

Dans cet exemple, la fonction reverseArray prend un tableau de type T et renvoie un tableau inversé du même type. Le paramètre de type T garantit que la fonction fonctionne avec des tableaux de tout type tout en préservant la sécurité des types.

Contraintes sur les génériques

Il peut parfois être nécessaire d'imposer des contraintes au paramètre de type générique pour garantir qu'il possède certaines propriétés. Pour cela, utilisez des contraintes:

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

Dans cet exemple, la fonction logLength est limitée aux types qui ont une propriété length. Cela permet à la fonction d'accepter des chaînes et des tableaux, mais pas des nombres ou d'autres types sans propriété length.

Conclusion

Les génériques dans TypeScript offrent un moyen puissant de créer des composants flexibles et réutilisables tout en maintenant une sécurité de type élevée. En comprenant et en utilisant les génériques, vous pouvez écrire du code plus générique et adaptable, améliorant ainsi la qualité globale et la maintenabilité de vos applications TypeScript.

Expérimentez avec des génériques dans vos projets pour voir leurs avantages en action et améliorer vos compétences en programmation TypeScript.