TypeScript Academy · Lektion

Spread in Arrays und Objekten

Verteilen Sie Werte per Spread und bewahren Sie dabei präzise Typen.

Spread in Arrays und Objekten ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Werte mit Spread kopieren

Der Spread-Operator ... kopiert Elemente eines Arrays oder Eigenschaften eines Objekts in ein neues Array beziehungsweise Objekt. TypeScript verfolgt den resultierenden Typ präzise, was für unveränderliche Aktualisierungen entscheidend ist.

Array-Spread

Verteilen Sie zwei Arrays mit Spread in ein neues Array, um sie zu verketten. Der Elementtyp des Ergebnisses ist die Union der Elementtypen beider Quellarrays.

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

Spread und Literale kombinieren

Sie können Spread-Elemente mit einzelnen Werten abwechseln. Die Reihenfolge bleibt exakt so erhalten, wie sie geschrieben wurde.

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

Elementtypen bei Spread

Wenn die Spread-Quellen unterschiedliche Elementtypen haben, ist das Ergebnis ein Array ihrer Union. Annotieren Sie den Typ oder überlassen Sie die Arbeit der Typinferenz.

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

Objekt-Spread

Objekt-Spread kopiert eigene, aufzählbare Eigenschaften in ein neues Objekt. Der resultierende Typ führt die Strukturen der Quellobjekte zusammen.

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

Eigenschaften mit Spread überschreiben

Wenn Schlüssel mehrfach vorkommen, gewinnt der letzte. Verteilen Sie ein Objekt mit Spread und überschreiben Sie anschließend bestimmte Felder — das ist die Grundlage unveränderlicher Aktualisierungen.

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

Die Reihenfolge bestimmt den Gewinner

Die Priorität von Eigenschaften folgt der Reihenfolge der Quellen. Setzen Sie Überschreibungen nach dem Spread, damit sie gewinnen; davor würden sie vom Spread überschrieben.

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

Typ einer überschriebenen Eigenschaft

Wenn eine Überschreibung den Typ einer Eigenschaft ändert, spiegelt der resultierende Typ den neuen Typ wider. TypeScript übernimmt das zuletzt auftretende Vorkommen.

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

Spread ist eine flache Kopie

Spread kopiert eine Ebene tief. Verschachtelte Objekte werden per Referenz geteilt, daher wirkt sich die Änderung eines verschachtelten Felds auf beide Kopien aus. Für eine tiefere Kopie muss auch das verschachtelte Objekt per Spread kopiert werden.

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

Spread und readonly

Das Spreaden eines readonly-Arrays oder -Objekts erzeugt eine neue, veränderliche Kopie. Der Modifikator readonly wird beim Spread nicht übernommen, da Sie einen neuen Wert erstellen.

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

Muster für unveränderliche Aktualisierungen

Spread ist die idiomatische Methode, um den Zustand ohne Mutation zu aktualisieren: Kopieren Sie das alte Objekt, überschreiben Sie die geänderten Felder und geben Sie das neue Objekt zurück.

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

Schnelltest

Testen Sie Ihr Verständnis von Spread-Typen und Präzedenz.

Zusammenfassung

Spread kopiert Array-Elemente oder Objekteigenschaften in einen neuen Wert. Array-Spread verkettet Arrays mit einem Union-Elementtyp; Objekt-Spread führt Strukturen zusammen, wobei bei Schlüsselkollisionen das letzte Vorkommen gewinnt. Spread ist eine flache Kopie – verschachtelte Objekte bleiben gemeinsam verwendet – und erzeugt auch aus readonly-Quellen neue, veränderliche Werte. Es ist das idiomatische Muster für unveränderliche Aktualisierungen.

Häufig gestellte Fragen

Ist die Lektion „Spread in Arrays und Objekten“ kostenlos?

Ja — der vollständige Text von „Spread in Arrays und Objekten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Spread in Arrays und Objekten“?

Verteilen Sie Werte per Spread und bewahren Sie dabei präzise Typen. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Spread in Arrays und Objekten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy