TypeScript Academy · Lektion

?. und ?? kombinieren

Kombinieren Sie Optional Chaining mit sinnvollen Standardwerten.

?. und ?? kombinieren 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.

Das perfekte Zusammenspiel

Optional Chaining und Nullish Coalescing sind dafür gedacht, zusammenzuarbeiten. Das Muster obj?.value ?? fallback liest sicher einen verschachtelten Wert und liefert einen Standardwert, wenn dieser fehlt. Es ist eines der nützlichsten Idiome im modernen TypeScript.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

So funktioniert das Muster

Zuerst wertet ?. die Kette aus und liefert den Wert oder undefined. Anschließend prüft ?? dieses Ergebnis: Ist es nullish, wird der Fallback verwendet. Zwei Operatoren, ein klarer Ausdruck.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Der Typ des Ergebnisses

Die Kette erzeugt T | undefined; ?? entfernt undefined und fügt den Typ des Fallbacks als Union hinzu. Bei einem passenden Fallback ist der endgültige Typ einfach T – es bleibt kein undefined mehr zu behandeln.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Gültige falsy-Werte erhalten

Da ?? nur bei nullish-Werten greift, bleibt eine gültige 0, die über die Kette abgerufen wurde, erhalten. Der Fallback wird nur verwendet, wenn die Eigenschaft tatsächlich fehlt.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Auf tief verschachtelte Konfigurationen zugreifen

Bei tief verschachtelten Konfigurationen verketten Sie mehrere ?.-Schritte und schließen mit einem einzigen ?? ab. Fehlt ein beliebiges Glied, wird sauber auf den Standardwert zurückgegriffen.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Standardwerte für API-Antworten

API-Antworten lassen optionale Felder häufig weg. Das kombinierte Muster liest sie defensiv aus und ersetzt sie durch sinnvolle Standardwerte, sodass der nachgelagerte Code einfach und fehlerfrei bleibt.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Mit Ergebnissen von Methoden kombinieren

Sie können auch Funktions- oder Methodenaufrufe verketten und für deren Ergebnisse Standardwerte festlegen. Gibt der Aufruf einen nullish-Wert zurück, wird der Fallback verwendet.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Ausführliche Prüfungen vermeiden

Vor diesen Operatoren hätten Sie mehrzeilige Prüfungen auf null geschrieben. Das kombinierte Idiom ersetzt einen ganzen Block durch einen einzigen Ausdruck und verbessert die Lesbarkeit, ohne an Sicherheit einzubüßen.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Auf eine andere Suche zurückgreifen

Der Fallback nach ?? kann selbst eine weitere verkettete Suche sein. So können Sie eine zweite Quelle ausprobieren, bevor Sie auf einen endgültigen literalen Standardwert zurückgreifen.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Mit Elementzugriff kombinieren

Das Muster funktioniert auch mit dem Zugriff auf Array-Elemente: Lesen Sie ein Element über ?.[i] aus und legen Sie mit ?? einen Standardwert fest.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Ein praxisnaher Settings-Reader

Zusammen ergibt sich daraus ein Settings-Reader, der sicher durch optionale Ebenen navigiert und einen verwendbaren Wert garantiert. Das ist TypeScript aus der Praxis, den Sie häufig schreiben werden.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Kurzer Check

Testen Sie Ihr Verständnis der Kombination aus ?. und ??.

Zusammenfassung: ?. und ?? kombinieren

Sie haben das Idiom obj?.value ?? fallback kennengelernt:

?. navigiert sicher nach unten und liefert den Wert oder undefined.
?? liefert nur dann einen Standardwert, wenn das Ergebnis nullish ist.
Im endgültigen Typ fällt undefined weg, sodass häufig ein sauberer Typ T entsteht.
Gültige falsy-Werte wie 0 bleiben erhalten.

Als Nächstes folgen optionale Aufrufe und optionaler Elementzugriff.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Häufig gestellte Fragen

Ist die Lektion „?. und ?? kombinieren“ kostenlos?

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

Kombinieren Sie Optional Chaining mit sinnvollen Standardwerten. 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 „?. und ?? kombinieren“?

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