0Pricing
TypeScript Academy · Leçon

Opérateur spread dans les tableaux et les objets

Étendre des valeurs tout en conservant des types exacts.

Opérateur spread dans les tableaux et les objets 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écomposer des valeurs

L'opérateur de décomposition ... copie les éléments d'un tableau ou les propriétés d'un objet dans un nouveau tableau ou objet. TypeScript suit précisément le type obtenu, ce qui est essentiel pour les mises à jour immuables.

Décomposition de tableaux

Décomposez deux tableaux dans un nouveau tableau pour les concaténer. Le type des éléments obtenus est l'union des types d'éléments des deux tableaux sources.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

Mélanger décompositions et valeurs littérales

Vous pouvez intercaler des éléments décomposés et des valeurs individuelles. L'ordre est conservé exactement comme il est écrit.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

Types des éléments décomposés

Lorsque les sources décomposées ont des types d'éléments différents, le résultat est un tableau contenant leur union. Annotez-le ou laissez l'inférence s'en charger.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

Décomposition d'objets

La décomposition d'objet copie les propriétés propres et énumérables dans un nouvel objet. Le type obtenu fusionne les formes des sources.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

La décomposition remplace les propriétés

Lorsque des clés entrent en collision, la dernière l'emporte. Décomposez un objet, puis remplacez certains champs — c'est le fondement des mises à jour immuables.

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

L'ordre détermine le gagnant

La priorité des propriétés suit l'ordre des sources. Placez les remplacements après la décomposition pour qu'ils l'emportent ; placés avant, la décomposition les écrase.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

Type d'une propriété remplacée

Si un remplacement modifie le type d'une propriété, le type obtenu reflète le nouveau type. TypeScript retient le type de la dernière occurrence.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

La décomposition est une copie superficielle

La décomposition copie un seul niveau. Les objets imbriqués sont partagés par référence : modifier un champ imbriqué affecte donc les deux copies. Décomposez également l’objet imbriqué pour obtenir une copie plus profonde.

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

Décomposition et readonly

Décomposer un tableau ou un objet readonly produit une copie nouvelle et modifiable. Le modificateur readonly ne se transmet pas lors d’une décomposition, puisque vous construisez une nouvelle valeur.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

Modèle de mise à jour immuable

La décomposition est la manière idiomatique de mettre à jour l’état sans le modifier : copiez l’ancien objet, remplacez les champs modifiés, puis renvoyez le nouvel objet.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

Vérification rapide

Testez votre compréhension des types et de la priorité de la décomposition.

Récapitulatif

La décomposition copie les éléments d’un tableau ou les propriétés d’un objet dans une nouvelle valeur. La décomposition de tableau concatène les éléments avec un type union ; la décomposition d’objet fusionne les structures et, en cas de collision entre des clés, la dernière occurrence l’emporte. La décomposition est une copie superficielle : les objets imbriqués restent partagés, et elle produit des valeurs nouvelles et modifiables, même à partir de sources readonly. C’est le modèle idiomatique de mise à jour immuable.

Questions Fréquemment Posées

La leçon « Opérateur spread dans les tableaux et les objets » est-elle gratuite ?

Oui — le texte complet de « Opérateur spread dans les tableaux et les 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 « Opérateur spread dans les tableaux et les objets » ?

Étendre des valeurs tout en conservant des types exacts. 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 « Opérateur spread dans les tableaux et les 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

  1. Paramètres rest dans les fonctions
  2. Opérateur spread dans les tableaux et les objets
  3. Éléments rest des tuples
  4. Typer les fonctions variadiques
← Retour à TypeScript Academy