TypeScript Academy · Lektion

Typen für Objekt-Destructuring

Typisieren Sie die Eigenschaften destrukturierter Objekte, ohne die Umbenennungssyntax zu verwechseln.

Typen für Objekt-Destructuring ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Destrukturierung trifft auf Typen

Durch die Destrukturierung von Objekten werden Eigenschaften aus einem Objekt in lokale Variablen übernommen. Mit TypeScript können Sie die Struktur der Destrukturierung typisieren – allerdings gibt es dabei eine bekannte Falle in der Syntax. Sehen wir uns die richtige Schreibweise an.

Grundlegende Objektdestrukturierung

Bei einer einfachen Destrukturierung werden Eigenschaften anhand ihres Namens extrahiert. TypeScript leitet den Typ jeder Variablen aus dem Quellobjekt ab.

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

Das gesamte Muster typisieren

Um die destrukturierten Variablen zu typisieren, setzen Sie den Typ nach das gesamte Muster und beschreiben damit die Objektstruktur – nicht jede einzelne Variable.

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

Funktionsparameter destrukturieren

Ein sehr häufiges Muster: Sie destrukturieren ein Parameterobjekt direkt in der Signatur und typisieren seine Struktur. Innerhalb des Funktionskörpers sind name und id typisierte lokale Variablen.

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

Die Verwechslungsfalle beim Doppelpunkt

Bei der Destrukturierung bedeutet ein Doppelpunkt Umbenennen, nicht Typisieren. Mit { name: string } erstellen Sie eine Variable namens string, die den Wert von name enthält – fast nie das, was Sie beabsichtigen.

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

Umbenennen und Annotieren zusammen

Wenn Sie sowohl umbenennen als auch typisieren müssen, benennen Sie mit einem Doppelpunkt um und annotieren Sie anschließend das gesamte Muster. Die Annotation der Objektstruktur verwendet weiterhin die ursprünglichen Eigenschaftsnamen.

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

Einen benannten Typ verwenden

Bei allem, was über eine einfache Struktur hinausgeht, sollten Sie eine benannte Schnittstelle einer Inline-Struktur vorziehen. Sie ist besser lesbar und wiederverwendbar.

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

Nur einige Eigenschaften destrukturieren

Sie müssen nicht jedes Feld extrahieren. Wählen Sie nur die benötigten Felder aus; der Typ der übrigen Eigenschaften des Objekts wird für die erstellten lokalen Variablen ignoriert.

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" }))

Rückgabewerte destrukturieren

Wenn eine Funktion ein Objekt zurückgibt, können Sie das Ergebnis sofort destrukturieren. Die Typen werden vom Rückgabetyp auf Ihre lokalen Variablen übertragen.

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

Den Rest sammeln

Ein Rest-Muster sammelt die übrigen Eigenschaften in einem neuen Objekt. TypeScript typisiert es als Quelltyp abzüglich der extrahierten Schlüssel.

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)

Zusammenfassung: Inline oder benannt

Inline-Strukturen eignen sich für einmalige, sehr kleine Muster. Verwenden Sie einen benannten Typ, sobald die Struktur größer wird oder wiederholt vorkommt. Und denken Sie daran: Der Doppelpunkt benennt um, die Annotation folgt nach der schließenden geschweiften Klammer.

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

Kurzer Test

Testen Sie Ihr Verständnis der typisierten Destrukturierung von Objekten.

Zusammenfassung

Typannotationen bei der Destrukturierung stehen nach dem gesamten Muster und beschreiben die Objektstruktur. Ein Doppelpunkt innerhalb des Musters benennt eine Bindung um, statt sie zu annotieren. Destrukturieren Sie Funktionsparameter und Rückgabewerte mit Strukturannotationen oder benannten Typen, extrahieren Sie nur die benötigten Felder und verwenden Sie ein Rest-Muster, um die übrigen Felder zu sammeln.

Häufig gestellte Fragen

Ist die Lektion „Typen für Objekt-Destructuring“ kostenlos?

Ja — der vollständige Text von „Typen für Objekt-Destructuring“ 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 „Typen für Objekt-Destructuring“?

Typisieren Sie die Eigenschaften destrukturierter Objekte, ohne die Umbenennungssyntax zu verwechseln. 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 1 von 4.

Wie lange dauert die Lektion „Typen für Objekt-Destructuring“?

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