0Pricing
TypeScript Academy · Leçon

Déstructuration de tableaux et de tuples

Déstructurer des tableaux et des tuples avec les types d’éléments appropriés.

Déstructuration de tableaux et de tuples est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Déstructuration positionnelle

La déstructuration de tableaux lie les variables selon leur position plutôt que selon leur nom. Avec les tuples, chaque position porte un type précis, ce qui permet une extraction ordonnée et rigoureuse.

Déstructuration de tableau élémentaire

Les crochets à gauche extraient les éléments selon l'ordre de leurs indices. Pour un tableau ordinaire, chaque liaison partage le type des éléments du tableau.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Annoter un motif de tuple

Pour annoter un motif, attribuez-lui un type tuple après celui-ci. Chaque position reçoit son propre type — ici, d'abord un nombre, puis une chaîne.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Les types suivent la position

Dans un tuple, le type associé à chaque indice est fixe. La première liaison est un nombre et la deuxième une chaîne : intervertir les valeurs provoquerait une erreur de typage.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Ignorer des éléments avec des virgules

Laissez un emplacement vide entre deux virgules pour ignorer une position dont vous n'avez pas besoin. Le type de l'élément ignoré est simplement laissé de côté.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Déstructurer avec un reste

Un élément de reste rassemble les éléments restants dans un tableau. Pour un tuple, son type reflète les positions restantes.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Type du reste provenant d'un tuple

Lorsque vous déstructurez un tuple avec un reste, TypeScript déduit pour la variable de reste un tuple constitué des éléments restants, en conservant leurs types.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Permuter des variables

Voici une astuce élégante rendue possible par la déstructuration de tableaux : permuter deux valeurs sans variable temporaire. Les types doivent être compatibles pour que la permutation soit validée.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Déstructuration des valeurs renvoyées par une fonction

Les fonctions qui renvoient des tuples s'associent parfaitement à la déstructuration — le motif useState de React repose exactement sur ce principe.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Valeurs par défaut dans les motifs de tableau

Fournissez une valeur par défaut pour une position qui peut être undefined. La valeur par défaut s'applique uniquement lorsque l'élément est absent ou vaut undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Déstructuration de tableaux imbriqués

Vous pouvez déstructurer des tableaux à l'intérieur d'autres tableaux dans une seule instruction. Les types s'imbriquent de la même manière, mais veillez à préserver la lisibilité des structures profondes.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Vérification rapide

Testez votre compréhension de la déstructuration des tableaux et des tuples.

Récapitulatif

La déstructuration de tableaux lie les éléments selon leur position ; annotez-la avec un type tuple après le motif afin que chaque indice reçoive son propre type. Ignorez des éléments avec des emplacements vides entre les virgules, rassemblez le reste avec un élément de reste — qui reste un tuple des positions restantes — et fournissez des valeurs par défaut pour les positions potentiellement absentes. Les valeurs renvoyées sous forme de tuple et la déstructuration permettent de créer des motifs tels que useState.

Questions Fréquemment Posées

La leçon « Déstructuration de tableaux et de tuples » est-elle gratuite ?

Oui — le texte complet de « Déstructuration de tableaux et de tuples » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déstructuration de tableaux et de tuples » ?

Déstructurer des tableaux et des tuples avec les types d’éléments appropriés. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Déstructuration de tableaux et de tuples » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Types et déstructuration d’objets
  2. Déstructuration de tableaux et de tuples
  3. Valeurs par défaut lors de la déstructuration
  4. Modèles de déstructuration imbriquée
← Retour à TypeScript Academy