TypeScript Academy · Leçon

Types et déstructuration d’objets

Typer les propriétés d’objets déstructurés sans confondre avec la syntaxe de renommage.

Types et déstructuration d’objets est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Le déstructurage à la rencontre des types

Le déstructurage d’objet extrait des propriétés d’un objet pour les placer dans des variables locales. Avec TypeScript, vous pouvez annoter la forme déstructurée — mais la syntaxe comporte un piège bien connu. Voyons comment procéder correctement.

Déstructurage d’objet de base

Le déstructurage simple extrait les propriétés par leur nom. TypeScript déduit le type de chaque variable à partir de l’objet source.

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

Annoter l’ensemble du motif

Pour annoter les variables déstructurées, placez le type après le motif entier en décrivant la forme de l’objet — et non après chaque variable.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Déstructurer les paramètres d’une fonction

Voici un motif très courant : déstructurer directement un objet paramètre dans la signature et en annoter la forme. Dans le corps, name et id sont des variables locales typées.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Le piège de la confusion avec les deux-points

Dans un déstructurage, les deux-points indiquent un renommage, et non une annotation. Écrire { name: string } crée une variable appelée string qui contient la valeur de name — ce que vous ne recherchez presque jamais.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Renommer et annoter ensemble

Si vous devez à la fois renommer et typer, renommez avec deux-points, puis annotez l'ensemble du motif. L'annotation de la forme utilise toujours les noms de propriétés d'origine.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Utiliser un type nommé

Pour tout ce qui n'est pas trivial, préférez une interface nommée à une forme écrite directement. Le code est plus lisible et réutilisable.

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

Déstructurer seulement certaines propriétés

Vous n'avez pas besoin d'extraire tous les champs. Choisissez ceux dont vous avez besoin ; le type du reste de l'objet est ignoré pour les variables locales que vous créez.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Déstructurer les valeurs de retour

Lorsqu'une fonction renvoie un objet, vous pouvez déstructurer immédiatement le résultat. Les types sont transmis du type de retour à vos variables locales.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Récupérer le reste

Un motif de reste rassemble les propriétés restantes dans un nouvel objet. TypeScript le type comme le type source privé des clés extraites.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Récapitulatif : forme directe ou nommée

Les formes écrites directement conviennent aux motifs minuscules utilisés une seule fois. Utilisez un type nommé dès que la forme s'agrandit ou se répète. Et souvenez-vous-en : les deux-points renomment, tandis que l'annotation vient après l'accolade fermante.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Vérification rapide

Testez votre compréhension de la déstructuration d'objets typés.

Récapitulatif

Les annotations de type appliquées à une déstructuration viennent après l'ensemble du motif et décrivent la forme de l'objet. Les deux-points à l'intérieur du motif renomment une liaison, ils ne l'annotent pas. Déstructurez les paramètres et les valeurs de retour des fonctions avec des annotations de forme ou des types nommés, n'extrayez que les champs dont vous avez besoin et utilisez un motif de reste pour récupérer ce qui reste.

Questions Fréquemment Posées

La leçon « Types et déstructuration d’objets » est-elle gratuite ?

Oui — le texte complet de « Types et déstructuration d’objets » 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 « Types et déstructuration d’objets » ?

Typer les propriétés d’objets déstructurés sans confondre avec la syntaxe de renommage. 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 1 sur 4.

Combien de temps prend la leçon « Types et déstructuration d’objets » ?

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