TypeScript Academy · Lektion

Standardwerte beim Destructuring

Kombinieren Sie Standardwerte sicher mit Typannotationen.

Standardwerte beim Destructuring ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Lücken füllen

Standardwerte bei der Destrukturierung liefern einen Ersatzwert, wenn eine Eigenschaft oder ein Element fehlt oder undefined ist. Zusammen mit der Typinferenz von TypeScript machen sie optionale Konfigurationen komfortabel und sicher.

Ein Standardwert bei der Objekt-Destrukturierung

Schreiben Sie nach einer Bindung = value, um ihr einen Ersatzwert zu geben. Wenn die Eigenschaft fehlt oder undefined ist, wird stattdessen der Standardwert verwendet.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Standardwerte mit optionalen Eigenschaften

Standardwerte passen natürlicherweise zu optionalen Eigenschaften (?). Der Standardwert entfernt den Fall undefined, sodass die resultierende Variable den nicht optionalen Typ hat.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Standardwerte und abgeleitete Typen

Wenn Sie keine Annotation angeben, leitet TypeScript den Typ der Variable aus dem Standardwert ab. Hier macht 0 aus count eine number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Nur undefined löst den Standardwert aus

Ein wichtiger Detailpunkt: Standardwerte werden nur bei undefined verwendet, niemals bei anderen falsy Werten wie 0, "" oder null. Diese Werte werden unverändert übernommen.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Standardwerte bei Funktionsparametern

Standardwerte für destrukturierte Parameter machen optionale Optionen unkompliziert. Jedes Feld kann direkt in der Signatur seinen eigenen Ersatzwert erhalten.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Den gesamten Parameter mit einem Standardwert versehen

Damit Aufrufer das Argumentobjekt vollständig weglassen können, geben Sie dem Parameter selbst den Standardwert {}. Ohne diesen Standardwert würde ein Aufruf ohne Argument einen Fehler auslösen.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Standardwerte beim Umbenennen

Sie können in einer Bindung gleichzeitig umbenennen und einen Standardwert festlegen: Benennen Sie zuerst um und fügen Sie den Standardwert anschließend nach dem neuen Namen hinzu.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Berechnete Standardwerte

Ein Standardwert kann jeder beliebige Ausdruck sein, auch einer, der auf frühere Bindungen verweist. Er wird verzögert ausgewertet — und zwar nur, wenn der Wert tatsächlich fehlt.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Zusammenfassung: Standardwerte bei Arrays

Standardwerte funktionieren auch bei der Array-Destrukturierung. Sie werden pro Position verwendet, wenn ein Element fehlt oder undefined ist.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Wann Standardwerte besonders nützlich sind

Standardwerte eignen sich ideal für Optionsobjekte: Aufrufer geben nur an, was sie benötigen, und die Funktion ergänzt sinnvolle Ersatzwerte. Außerdem entfernen sie undefined aus den abgeleiteten Typen und vereinfachen dadurch den Funktionsrumpf.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Kurzer Test

Testen Sie Ihr Verständnis von Standardwerten bei der Destrukturierung.

Zusammenfassung

Standardwerte bei der Destrukturierung (= fallback) werden nur verwendet, wenn ein Wert fehlt oder undefined ist — niemals bei anderen falsy Werten. Sie entfernen undefined aus den Typen optionaler Eigenschaften, können abgeleitet oder annotiert werden, unterstützen das Umbenennen und dürfen auf frühere Bindungen verweisen. Bei Optionsobjekten sollten Sie den Parameter mit {} vorbelegen, damit Aufrufer ihn vollständig weglassen können.

Häufig gestellte Fragen

Ist die Lektion „Standardwerte beim Destructuring“ kostenlos?

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

Kombinieren Sie Standardwerte sicher mit Typannotationen. 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 3 von 4.

Wie lange dauert die Lektion „Standardwerte beim 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