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 merveilleusement bien ensemble en TypeScript. Lorsque vous avez découvert les tableaux typés précédemment, vous avez utilisé la syntaxe T[] pour spécifier 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 propose une syntaxe alternative pour les tableaux typés en utilisant le 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 lors de l'utilisation de fonctions génériques qui opèrent sur des tableaux. Elle rend la nature générique de votre code plus explicite et lisible, surtout lorsque vous créez des fonctions capables de travailler avec des tableaux de n'importe quel type tout en préservant la sécurité des types.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Défi
FacileCréez une fonction générique nommée getFirstElement qui prend 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é
arrde typeArray<T> - Renvoyer le premier élément de type
Touundefined - Avoir une annotation de type de retour explicite de
T | undefined
Créez les tableaux suivants en utilisant la syntaxe Array<T> :
stringArrayde typeArray<string>contenant["apple", "banana", "cherry"]numberArrayde typeArray<number>contenant[10, 20, 30, 40]booleanArrayde typeArray<boolean>contenant[true, false, true]emptyStringArrayde typeArray<string>qui est vide
Testez votre fonction et affichez les résultats suivants :
- Affichez le résultat de l'appel de
getFirstElementavecstringArray - Affichez le résultat de l'appel de
getFirstElementavecnumberArray - Affichez le résultat de l'appel de
getFirstElementavecbooleanArray - Affichez le résultat de l'appel de
getFirstElementavecemptyStringArray - Affichez le résultat de l'appel de
getFirstElementavec un nouveauArray<string>contenant["single"]
Aide-mémoire
TypeScript propose deux syntaxes équivalentes pour les tableaux typés :
// 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 lors de l'utilisation de fonctions génériques qui opèrent sur des tableaux, rendant la nature générique de votre code plus explicite et lisible tout en préservant la sécurité des types.
Essayez vous-même
// À FAIRE : Écrivez votre code ici
// Créer la fonction générique getFirstElement
// Créer les tableaux requis en utilisant la syntaxe Array<T>
// Tester la fonction et imprimer les résultatsCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Introduction à TypeScript
1Premiers pas avec TS
Qu'est-ce que TypeScript ?Pourquoi utiliser TypeScript ?Votre premier code TypeScriptProcessus de compilation et erreursRécapitulatif : Introduction à TS4Travailler avec les fonctions
Typage des paramètres et valeurs de retourTypage des fonctions fléchéesLe type de retour 'void'Paramètres optionnels avec '?'Valeurs par défaut des paramètresTypage des paramètres RestDéfinir des types de fonctionsRécapitulatif : Créer des fonctions typées
2Types fondamentaux
Types de base : str, num, booleanLe type 'any' : la porte de sortieLe type 'unknown'Travailler avec 'null' et 'undef'L'inférence de type en actionAnnotations de type explicitesRécapitulatif : Pratique des types fondamentaux5Types : Alias, Unions & Intersections
Alias de types pour les primitifsTypes d'union ('|')Travailler avec les types d'unionTypes littérauxTypes d'intersection ('&')Combiner des alias de typesRécapitulatif : Combinaisons de types avancées3Structure de données : Tableaux et Tuples
Tableaux typésModificateur 'readonly' pour les tableauxQu'est-ce qu'un tuple ?Déclaration et accès aux tuplesDéstructuration de tuplesTuples readonlyTableaux typés multidimensionnelsSpread operator avec les tableauxRécapitulatif : Tableaux et tuples6Typage des objets et interfaces
Annotations de type d'objet en ligneAlias de type pour les objetsIntroduction aux interfacesInterfaces vs Alias de typePropriétés optionnelles et ReadonlyÉtendre les interfaces et les typesAjout de méthodes aux interfacesRécapitulatif : Définir la structure des objets9Les génériques : un premier aperçu
Le problème résolu par les génériquesCréer une fonction d'identité génériqueUtiliser une fonction génériqueTableaux génériquesInterfaces génériquesRécapitulatif : Pratique des fonctions génériques