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 des valeurs des tuples : la déstructuration. Cette fonctionnalité JavaScript fonctionne parfaitement avec les tuples typés de TypeScript, vous permettant de déballer les valeurs d'un 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)

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez un tuple nommé employee qui contient un nombre (ID de l'employé) suivi d'une chaîne de caractères (nom de l'employé). Initialisez-le avec l'ID 1001 et le nom "Sarah Johnson".

Utilisez la déstructuration pour extraire les valeurs du tuple employee dans deux variables distinctes nommées empId et empName.

Créez un autre tuple nommé coordinates qui contient deux nombres représentant les coordonnées de latitude et de longitude. Initialisez-le avec les valeurs 40.7128 et -74.0060.

Utilisez la déstructuration pour extraire les valeurs du tuple location dans deux variables distinctes nommées latitude et longitude.

Affichez les variables déstructurées dans l'ordre suivant, chacune sur une ligne distincte :

Affichez l'ID de l'employé
Affichez le nom de l'employé
Affichez la latitude
Affichez la longitude

Aide-mémoire

La déstructuration vous permet d'extraire des valeurs de tuples dans des variables distinctes en une seule ligne à l'aide de crochets :

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)

TypeScript conserve les informations de type pour chaque variable déstructurée en fonction de la définition de type du tuple.

Essayez vous-même

// À FAIRE : Écrivez votre code ici
// Créez le tuple de l'employé avec l'ID 1001 et le nom "Sarah Johnson"
// Utilisez la déstructuration pour extraire empId et empName
// Créez le tuple de coordonnées 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 au besoin)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.