Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4.3. La Généricité

La généricité permet d’écrire des définitions de classes ou de fonctions paramétriques (entre autres). Ne vous inquiétez pas, on va voir tout de suite ce que cela signifie. Mais avant, sachez que même si la généricité existe dans TypeScript depuis sa création, ce n’est pas un concept exclusif à TypeScript. On retrouve la généricité dans plusieurs autres langages comme Java ou Python par exemple.

Pour illustrer concrètement ce qu’est la généricité en terme de code, prenons l’exemple d’un tableau. Comment faites vous pour indiquer à TypeScript que vous voulez que tous les éléments d’un tableau soit d’un type particulier ? Vous n’allez tout de même pas faire comme ça :

// On déclare un tableau vide
let fruits = [];

// On déclare de nouveaux fruits
let pomme: Fruit = getFruit(1);
let poire: Fruit = getFruit(2);
let kiwi: Fruit = getFruit(3);

// On ajoute ces fruits au tableau initial
fruits.push(pomme, poire, kiwi);

Ce code est très fastidieux, et surtout, nous n’avons aucune garantie que le tableau ne contient que des fruits. On pourrait tout à fait ajouter un nombre ou une chaîne de caractères à ce tableau, cela ne poserait aucun problème. Nous allons donc utiliser la généricité pour indiquer à TypeScript que nous ne voulons que des fruits dans notre tableau, comme ceci :

let fruits: Array<Fruits> = [pomme, poire, kiwi];

items.push(ananas); // ok
items.push(123); // Erreur, le type est invalide !

Vous avez remarque à la ligne 1 ? Nous avons utilise les symboles « <« , et « > » propres à la généricité, et passer à l’intérieur le type que nous voulions pour nos éléments du tableau. Et le type s’applique également aux prochains éléments qui serait ajouté au tableau. Parfait !

Bien sûr, la généricité permet de faire des choses beaucoup plus poussée, mais ce n’est pas vraiment l’objet de ce cours, et ce serait faire du bruit pour rien.

Dans notre cas, retenez simplement que dès que vous voyez le symbole « <> », dites-vous que cela permet d’appliquer un type de manière générique à tous les éléments d’un tableau, ou d’autres choses selon l’élément à gauche du symbole de la généricité.

Sachez que Array<Fruits> est équivalent à Fruits[]. La syntaxe de la deuxième option est plus concise et plus populaire, mais il fallait que je vous présente la généricité absolument avant de continuer. 😉