Tableaux génériques

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 60 sur 73.

Les tableaux et les génériques fonctionnent parfaitement ensemble en TypeScript. Lorsque vous avez découvert les tableaux typés précédemment, vous avez utilisé la syntaxe T[] pour indiquer qu’un tableau ne peut contenir que des éléments d’un type spécifique. Les génériques vous offrent une autre façon d’exprimer ce même concept.

TypeScript fournit une syntaxe alternative pour les tableaux typés au format Array<T> :

// Ces deux déclarations sont équivalentes :
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

La syntaxe Array<T> est particulièrement utile lorsque vous travaillez avec des fonctions génériques qui opèrent sur des tableaux. Elle rend la nature générique de votre code plus explicite et lisible, en particulier lorsque vous créez des fonctions capables de fonctionner avec des tableaux de n’importe quel type tout en préservant la sécurité des types.

Défi

Facile

Créez une fonction générique nommée getFirstElement qui accepte un tableau de n’importe quel type et renvoie le premier élément ou undefined si le tableau est vide.

La fonction doit :

Utiliser un paramètre de type générique T
Accepter un paramètre nommé arr de type Array<T>
Renvoyer le premier élément de type T ou undefined
Posséder une annotation explicite du type de retour T | undefined

Créez les tableaux suivants en utilisant la syntaxe Array<T> :

stringArray de type Array<string> contenant ["apple", "banana", "cherry"]
numberArray de type Array<number> contenant [10, 20, 30, 40]
booleanArray de type Array<boolean> contenant [true, false, true]
emptyStringArray de type Array<string> qui est vide

Testez votre fonction et affichez les résultats suivants :

Affichez le résultat de l’appel de getFirstElement avec stringArray
Affichez le résultat de l’appel de getFirstElement avec numberArray
Affichez le résultat de l’appel de getFirstElement avec booleanArray
Affichez le résultat de l’appel de getFirstElement avec emptyStringArray
Affichez le résultat de l’appel de getFirstElement avec un nouveau Array<string> contenant ["single"]

Essayez vous-même

// TODO: Écrivez votre code ici
// Créez la fonction générique getFirstElement

// Créez les tableaux requis en utilisant la syntaxe Array<T>

// Testez la fonction et affichez les résultats