Antwort.

Der Mechanismus des optional chaining (?.) wurde in JavaScript eingeführt, um einen bequemen und sicheren Zugriff auf Eigenschaften und Methoden von Objekten zu ermöglichen, die möglicherweise nicht definiert sind. In TypeScript ist er besonders nützlich, da er hilft, Laufzeitfehler zu vermeiden, die mit dem Zugriff auf Eigenschaften oder Methoden von undefined oder null verbunden sind.

Hintergrund

Vor der Einführung des optionalen Chainings mussten Entwickler manuell die Existenz jeder Ebene der Objektverschachtelung überprüfen, was den Code lang und schwer lesbar machte:

if (obj && obj.a && obj.a.b) {
  // ...
}

Problem

Beim Zugriff auf verschachtelte Eigenschaften eines nicht definierten Objekts kann ein Laufzeitfehler auftreten: Cannot read property 'x' of undefined. Außerdem erschweren lange Kettenprüfungen die Wartung und Lesbarkeit des Codes.

Lösung

Optional chaining (?.) ermöglicht den Zugriff auf verschachtelte Eigenschaften, Methoden oder Array-Elemente, wobei automatisch undefined zurückgegeben wird, wenn ein Teil der Kette null oder undefined ist.

Beispielcode:

interface User {
  name: string;
  address?: {
    city?: string;
  };
}

const user: User = { name: 'Ivan' };
console.log(user.address?.city); // undefined

Wichtige Merkmale:

Erlaubt das Schreiben von kompaktem, sicherem und verständlichem Code.
Funktioniert mit dem Zugriff auf Eigenschaften, Methoden, Array-Indizes.
Der Rückgabewerttyp ist T | undefined, was vom TypeScript-Compiler berücksichtigt wird und hilft, Fehler zu vermeiden.

Fangfragen.

Kann man optional chaining links vom Zuweisungsoperator verwenden? Zum Beispiel: user.address?.city = 'Moscow'?

Nein, optional chaining kann nicht in der linken Ausdrückskomponente einer Zuweisung verwendet werden, das würde einen Kompilationsfehler verursachen. Optional chaining funktioniert nur beim Lesen, nicht beim Schreiben.

Kann man optional chaining verwenden, um eine Methode aufzurufen, wenn das Objekt selbst möglicherweise nicht definiert ist? Zum Beispiel: user?.logInfo()?

Ja, wenn das Objekt vor dem Methodenaufruf undefined/null sein kann, wird der Aufruf user?.logInfo() keinen Fehler auslösen und einfach undefined zurückgeben, wenn user nicht definiert ist.

user?.logInfo(); // wenn user definiert ist, wird logInfo aufgerufen, andernfalls passiert nichts

Was ist der Unterschied zwischen optional chaining und dem alten '&&'-Operator, z.B.: user && user.address && user.address.city?

Optional chaining ist kürzer, funktioniert für alle Typen (einschließlich Methoden und Arrays), und TypeScript berücksichtigt es bei der Typüberprüfung. Wichtig ist, dass Sie beim Verwenden des '&&'-Operators versehentlich nicht true/false oder undefined, sondern den verschachtelten Wert erhalten können. Optional chaining gibt hingegen garantiert entweder den erwarteten Typ oder undefined zurück, was in der Typausgabe berücksichtigt wird.

Typische Fehler und Anti-Patterns

Die Erwartung, dass optional chaining "verschachtelte Objekte" bei Zuweisungen "erzeugt" — das tut es nicht.
Die Verwendung von optional chaining beim Zugriff auf Variablen, die per Typ niemals undefined/null sein können (überflüssiger und nutzloser Code).
Die Gewohnheit, optional chaining gedankenlos überall anzuwenden, was die weitere Wartung des Codes erschwert.

Beispiel aus dem Leben

Negativer Fall

Im Code werden lange Ketten von optional chaining verwendet, selbst dort, wo die Variablen gemäß der Geschäftslogik immer definiert sind:

order?.customer?.address?.city = 'London';

Vorteile:

Schützt vor möglichen Fehlern, falls die Eigenschaften tatsächlich nicht definiert sind.

Nachteile:

Die Zuweisung erfolgt nicht, wenn auch nur eine der Eigenschaften fehlt, und es gibt keine Benachrichtigung oder Fehlerbehandlung; es entsteht "versteckte" Logik, die den Code verwirrend macht.

Positiver Fall

Optional chaining wird nur verwendet, wenn mit externen Daten gearbeitet wird oder in Bereichen, in denen die Werte tatsächlich undefiniert sein können:

const city = apiResponse?.info?.location?.city || 'Unbekannt';