TypeScript Academy · Leçon

Modèles de déstructuration imbriquée

Typer des expressions de déstructuration profondément imbriquées.

Modèles de déstructuration imbriquée est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Accéder aux données imbriquées

La déstructuration imbriquée extrait en une seule instruction des valeurs provenant d'objets contenus dans d'autres objets. Elle est concise, mais interagit avec les types d'une manière qu'il est utile de comprendre — et peut nuire à la lisibilité si vous en abusez.

Déstructurer une propriété imbriquée

Reproduisez la forme de l'objet à gauche. Pour accéder à data.user.name, imbriquez un motif sous user.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

Le nom externe n'est pas lié

Voici un piège subtil : dans { user: { name } }, user est uniquement un chemin, pas une liaison. Vous obtenez name, mais aucune variable appelée user n'existe ensuite.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Typer une déstructuration imbriquée

Annotez avec la forme imbriquée complète après le motif. Chaque niveau reproduit la structure de l'objet.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Les types nommés sont plus lisibles

Les formes imbriquées écrites directement deviennent vite difficiles à manier. Une interface nommée garde l'annotation propre tout en permettant l'extraction imbriquée.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Extraire les deux niveaux

Si vous avez aussi besoin de l'objet externe, extrayez-le séparément, puis déstructurez ses membres lors d'une autre étape. Cette approche est souvent plus claire qu'un imbrication profonde.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Associer imbrication et valeurs par défaut

Les valeurs par défaut peuvent apparaître à n'importe quel niveau. Fournissez une valeur de repli pour un champ imbriqué potentiellement absent au moment où vous le liez.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Définir une valeur par défaut pour les sous-objets absents

Lorsqu'un objet imbriqué entier peut être absent, donnez-lui la valeur par défaut {} avant de déstructurer ses champs — sinon, accéder à une propriété de undefined provoque une erreur.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Tableau imbriqué dans un objet

Vous pouvez mélanger les motifs d'objet et de tableau. Ici, nous récupérons le premier tag d'un tableau imbriqué en une seule ligne.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Compromis liés à la lisibilité

Les motifs profondément imbriqués économisent des lignes, mais peuvent masquer l'intention. Trois niveaux d'imbrication avec des valeurs par défaut deviennent difficiles à parcourir. Si le lecteur doit s'interrompre pour comprendre, divisez le code en plusieurs étapes.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Un exemple équilibré

Un seul niveau d'imbrication avec quelques champs constitue généralement le meilleur compromis : c'est concis sans être énigmatique.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Vérification rapide

Testez votre compréhension de la déstructuration imbriquée.

Récapitulatif

La déstructuration imbriquée reproduit la forme de l'objet pour accéder aux valeurs internes ; les clés externes sont des chemins, pas des liaisons, de sorte que seuls les noms les plus internes deviennent des variables. Annotez avec la forme imbriquée complète ou un type nommé, donnez la valeur par défaut {} aux sous-objets absents avant d'en déstructurer les champs, et ajoutez des motifs de tableau si nécessaire. Gardez une imbrication peu profonde — divisez les motifs complexes en plusieurs étapes pour préserver la lisibilité.

Questions Fréquemment Posées

La leçon « Modèles de déstructuration imbriquée » est-elle gratuite ?

Oui — le texte complet de « Modèles de déstructuration imbriquée » 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 « Modèles de déstructuration imbriquée » ?

Typer des expressions de déstructuration profondément imbriquées. 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 4 sur 4.

Combien de temps prend la leçon « Modèles de déstructuration imbriquée » ?

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

Types et déstructuration d’objets
Déstructuration de tableaux et de tuples
Valeurs par défaut lors de la déstructuration
Modèles de déstructuration imbriquée

← Retour à TypeScript Academy