TypeScript Academy · Lektion

Optional Chaining mit ?.

Greifen Sie sicher auf tief verschachtelte Eigenschaften zu, die null sein können.

Optional Chaining mit ?. 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.

Der Optional-Chaining-Operator

Optional Chaining (?.) ermöglicht den sicheren Zugriff auf eine Eigenschaft, die sich auf einem null- oder undefined-Wert befinden könnte. Wenn der Wert nullish ist, wird der gesamte Ausdruck per Short-Circuit zu undefined, statt einen Fehler auszulösen.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Short-Circuit bei nullish-Werten

Wenn der Operand vor ?. null oder undefined ist, wird die Auswertung sofort beendet und undefined zurückgegeben. Der Rest der Kette wird nie ausgeführt.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Mehrere Ebenen verketten

Sie können ?. an jeder unsicheren Stelle eines tief verschachtelten Zugriffs einsetzen. Jedes nullish-Glied löst einen Short-Circuit für die gesamte Kette aus und schützt Sie vor Fehlern wie „cannot read property of undefined“.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

Der Ergebnistyp enthält undefined

Da die Kette undefined liefern kann, fügt TypeScript undefined zum Ergebnistyp hinzu. Wenn der Eigenschaftstyp string war, lautet der verkettete Ergebnistyp string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Das undefined-Ergebnis behandeln

Da das Ergebnis undefined sein kann, prüfen Sie es normalerweise oder stellen einen Ersatzwert bereit. Das Typsystem erinnert Sie daran, den fehlenden Fall zu behandeln.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Vergleich mit &&-Ketten

Vor ?. schrieben Entwickler lange &&-Ketten: a && a.b && a.b.c. Optional Chaining drückt dieselbe Absicht deutlich kompakter aus und lässt sich von oben nach unten lesen.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Warum ?. besser ist als &&

Der Ansatz mit && behandelt jeden falsy-Wert (0, '', false) als Abbruchbedingung, was zu einem Fehler führen kann. Optional Chaining stoppt nur bei null oder undefined – genau das ist normalerweise gewünscht.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Optional Chaining bei Arrays von Objekten

Optional Chaining funktioniert bei jedem Eigenschaftszugriff. Zusammen mit dem Zugriff auf ein Element können Sie damit sicher auf verschachtelte Arrays von Objekten zugreifen.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

Der Short-Circuit beendet den gesamten Ausdruck

Sobald eine Kette per Short-Circuit beendet wird, werden sogar Eigenschaftszugriffe, die danach ohne ?. geschrieben sind, übersprungen. Der gesamte Ausdruck wird sofort zu undefined ausgewertet.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Optional Chaining mit Funktionsrückgaben

Sie können die Kette am Ergebnis eines Funktionsaufrufs fortsetzen. Wenn die Funktion einen nullish-Wert zurückgibt, wird der folgende Zugriff sicher per Short-Circuit beendet.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Ein praxisnahes Konfigurationsbeispiel

Optional Chaining ist besonders nützlich beim Lesen unvollständiger Konfigurationen oder API-Antworten, bei denen verschachtelte Felder fehlen können. Dadurch bleiben die Zugriffe übersichtlich und absturzfrei.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Kurzer Test

Testen Sie Ihr Verständnis von Optional Chaining.

Rückblick: Optional Chaining

Sie haben gelernt, dass ?.:

sicher auf Eigenschaften von möglicherweise null/undefineden Werten zugreift,
den gesamten Ausdruck bei einem nullish-Glied per Short-Circuit zu undefined macht,
undefined zum Ergebnistyp hinzufügt,
&&-Ketten verbessert, da es nur bei nullish-Werten stoppt und nicht bei allen falsy-Werten.

Als Nächstes geht es um den Nullish-Coalescing-Operator.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Häufig gestellte Fragen

Ist die Lektion „Optional Chaining mit ?.“ kostenlos?

Ja — der vollständige Text von „Optional Chaining mit ?.“ 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 „Optional Chaining mit ?.“?

Greifen Sie sicher auf tief verschachtelte Eigenschaften zu, die null sein können. 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 „Optional Chaining mit ?.“?

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