Déstructuration de tuples
Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 17 sur 73.
Alors que l'accès aux éléments d'un tuple par index fonctionne parfaitement, il existe une manière encore plus élégante d'extraire les valeurs des tuples : déstructuration. Cette fonctionnalité JavaScript fonctionne parfaitement avec les tuples typés de TypeScript, vous permettant de déballer les valeurs du tuple dans des variables distinctes en une seule ligne.
La déstructuration de tableau utilise des crochets sur le côté gauche d'une affectation pour créer de nouvelles variables qui correspondent à chaque position dans le tuple :
let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;
console.log(id); // 42 (TypeScript sait qu'il s'agit d'un nombre)
console.log(name); // "Alice" (TypeScript sait qu'il s'agit d'une chaîne de caractères)Défi
FacileCrée un tuple nommé employee qui contient un nombre (l’identifiant de l’employé) suivi d’une chaîne de caractères (le nom de l’employé). Initialise-le avec l’identifiant 1001 et le nom "Sarah Johnson".
Utilise la déstructuration pour extraire les valeurs du tuple employee dans deux variables distinctes nommées empId et empName.
Crée un autre tuple nommé coordinates qui contient deux nombres représentant les coordonnées de latitude et de longitude. Initialise-le avec les valeurs 40.7128 et -74.0060.
Utilise la déstructuration pour extraire les valeurs du tuple coordinates dans deux variables distinctes nommées latitude et longitude.
Affiche les variables déstructurées dans l’ordre suivant, chacune sur une ligne distincte :
- Afficher l’identifiant de l’employé
- Afficher le nom de l’employé
- Afficher la latitude
- Afficher la longitude
Essayez vous-même
// TODO: Écrivez votre code ici
// Créez le tuple employee avec l'ID 1001 et le nom "Sarah Johnson"
// Utilisez la déstructuration pour extraire empId et empName
// Créez le tuple coordinates avec les valeurs 40.7128 et -74.0060 (évitez d'utiliser 'location' comme nom de variable)
// Utilisez la déstructuration pour extraire latitude et longitude
// Affichez les quatre variables dans l'ordre spécifié
// Affichez les résultats (décommentez et modifiez si nécessaire)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);Cette 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ées2Types 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 objetsEntraînez-vous par vous-même : Compilateur JavaScript en ligne