TypeScript Academy · Lektion

Verschachtelte Destructuring-Muster

Typisieren Sie tief verschachtelte Destructuring-Ausdrücke.

Verschachtelte Destructuring-Muster ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Verschachtelte Daten erreichen

Mit verschachtelter Destrukturierung extrahieren Sie Werte aus Objekten innerhalb anderer Objekte in einer einzigen Anweisung. Das ist kompakt, wirkt sich aber auf besondere Weise auf die Typen aus — und kann bei übermäßiger Verwendung die Lesbarkeit beeinträchtigen.

Eine verschachtelte Eigenschaft destrukturieren

Bild Sie die Struktur des Objekts auf der linken Seite nach. Um data.user.name zu erreichen, verschachteln Sie unter user ein Muster.

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

Der äußere Name wird nicht gebunden

Eine wichtige Falle: In { user: { name } } ist user nur ein Pfad und keine Bindung. Sie erhalten name, aber danach existiert keine Variable namens user.

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

Verschachtelte Destrukturierung typisieren

Annotieren Sie das Muster danach mit der vollständigen verschachtelten Struktur. Jede Ebene bildet die Struktur des Objekts nach.

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

Benannte Typen sind besser lesbar

Inline-Strukturen mit Verschachtelungen werden schnell unübersichtlich. Eine benannte Schnittstelle hält die Annotation übersichtlich und ermöglicht weiterhin die verschachtelte Extraktion.

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

Beide Ebenen extrahieren

Wenn Sie auch das äußere Objekt benötigen, extrahieren Sie es separat und destrukturieren Sie seine Elemente anschließend in einem weiteren Schritt. Das ist oft klarer als eine tiefe Verschachtelung.

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

Verschachtelung mit Standardwerten kombinieren

Standardwerte können auf jeder Ebene auftreten. Geben Sie für ein möglicherweise fehlendes verschachteltes Feld direkt an der Stelle, an der Sie es binden, einen Ersatzwert an.

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

Fehlende Unterobjekte mit einem Standardwert versehen

Wenn ein vollständiges verschachteltes Objekt fehlen kann, setzen Sie vor der Destrukturierung seiner Felder den Standardwert {} dafür — andernfalls löst der Zugriff auf eine Eigenschaft von undefined einen Fehler aus.

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

Verschachteltes Array in einem Objekt

Sie können Objekt- und Array-Muster kombinieren. Hier extrahieren wir das erste Tag aus einem verschachtelten Array in einer einzigen Zeile.

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

Kompromisse bei der Lesbarkeit

Tief verschachtelte Muster sparen Zeilen, können aber die Absicht verschleiern. Drei Verschachtelungsebenen mit Standardwerten sind schwer zu überblicken. Wenn ein Leser innehalten muss, teilen Sie das Muster in mehrere Schritte auf.

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

Ein ausgewogenes Beispiel

Eine Verschachtelungsebene mit einigen Feldern ist meist der beste Kompromiss — kompakt, ohne kryptisch zu sein.

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

Kurzer Test

Testen Sie Ihr Verständnis der verschachtelten Destrukturierung.

Zusammenfassung

Verschachtelte Destrukturierung bildet die Objektstruktur nach, um innere Werte zu erreichen. Äußere Schlüssel sind Pfade und keine Bindungen, daher werden nur die innersten Namen zu Variablen. Annotieren Sie das Muster mit der vollständigen verschachtelten Struktur oder einem benannten Typ, versehen Sie fehlende Unterobjekte vor der Destrukturierung ihrer Felder mit dem Standardwert {} und kombinieren Sie bei Bedarf Array-Muster damit. Halten Sie die Verschachtelung flach — teilen Sie tiefe Muster aus Gründen der Lesbarkeit in mehrere Schritte auf.

Häufig gestellte Fragen

Ist die Lektion „Verschachtelte Destructuring-Muster“ kostenlos?

Ja — der vollständige Text von „Verschachtelte Destructuring-Muster“ 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 „Verschachtelte Destructuring-Muster“?

Typisieren Sie tief verschachtelte Destructuring-Ausdrücke. 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 4 von 4.

Wie lange dauert die Lektion „Verschachtelte Destructuring-Muster“?

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