TypeScript Academy · Lektion

Optionale Aufrufe und Elementzugriff

Verwenden Sie ?.() und ?.[] für sichere Methodenaufrufe und Indexzugriffe.

Optionale Aufrufe und Elementzugriff 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.

Über den Eigenschaftszugriff hinaus

Optional Chaining ist nicht auf obj?.prop beschränkt. Es gibt zwei weitere Formen: optionale Aufrufe mit ?.() und optionalen Elementzugriff mit ?.[index]. Beide brechen bei nullish-Werten ab, genau wie der Eigenschaftszugriff.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Optionale Methodenaufrufe

Verwenden Sie obj.method?.(), um eine Methode nur aufzurufen, wenn sie existiert. Wenn method null oder undefined ist, wird der Aufruf übersprungen und der Ausdruck ergibt undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Wo das ?. platziert wird

Das ?. steht direkt vor den Klammern des Aufrufs. obj.method?.() prüft method, nicht obj. Um auch obj abzusichern, schreiben Sie obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Optionale Callbacks aufrufen

Eine sehr häufige Verwendung ist der Aufruf eines optionalen Callback-Parameters. Schreiben Sie statt einer if-Prüfung callback?.(), um den Callback nur aufzurufen, wenn er übergeben wurde.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Optionaler Elementzugriff

Verwenden Sie für Arrays oder Indexsignaturen, die möglicherweise nullish sind, arr?.[index]. Wenn arr nullish ist, wird der Zugriff abgebrochen; andernfalls wird das Element wie gewohnt gelesen.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Elementzugriff mit dynamischen Schlüsseln

Optionaler Elementzugriff funktioniert auch mit der Klammerschreibweise für dynamische oder berechnete Schlüssel eines möglicherweise nullishen Objekts.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Elementzugriff und Aufrufe kombinieren

Sie können die Formen beliebig kombinieren. Greifen Sie auf ein Element eines optionalen Arrays zu und rufen Sie anschließend optional eine Methode dieses Elements auf – jedes ?. sichert seinen eigenen Schritt ab.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Optional Chaining mit Funktionsergebnissen

Sie können die von einer Funktion zurückgegebenen Werte weiterverketteten. Ergibt die Funktion einen nullish-Wert, werden nachfolgende Aufrufe oder Zugriffe sicher abgebrochen.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

Der Ergebnistyp enthält undefined

Wie bei Eigenschaftsketten fügen optionale Aufrufe und Elementzugriffe dem Ergebnistyp undefined hinzu. Kombinieren Sie sie mit ??, um einen Standardwert bereitzustellen und undefined zu entfernen.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Event-Handler absichern

In UI- und Event-Code können Handler, die möglicherweise nicht gesetzt sind, mit optionalen Aufrufen elegant aufgerufen werden. Keine ausführliche Existenzprüfung und kein Absturz, wenn der Handler fehlt.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Beispiel für einen Plugin-Dispatcher

Zusammengeführt ergibt sich ein Dispatcher, der einen benannten Plugin-Hook aus einer möglicherweise lückenhaften Registry optional aufruft und das Ergebnis auf einen Standardwert setzt, wenn nichts es verarbeitet.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Schnelltest

Testen Sie Ihr Verständnis von optionalen Aufrufen und Elementzugriffen.

Zusammenfassung: Optionale Aufrufe und Zugriffe

Sie haben die anderen Formen von Optional Chaining kennengelernt:

obj.method?.() ruft eine Methode nur auf, wenn sie existiert.
arr?.[index] liest sicher ein Element aus einem möglicherweise nullishen Container.
Alle Formen brechen bei einem nullishen Operanden mit undefined ab.
Kombinieren Sie sie mit ??, um einen Standardwert für das Ergebnis festzulegen.

Nächster Kurs: Grundlagen zu readonly und Unveränderlichkeit.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Häufig gestellte Fragen

Ist die Lektion „Optionale Aufrufe und Elementzugriff“ kostenlos?

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

Verwenden Sie ?.() und ?.[] für sichere Methodenaufrufe und Indexzugriffe. 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 „Optionale Aufrufe und Elementzugriff“?

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