?. und ??

Mit if auf undefined zu prüfen funktioniert, aber wenn du nur einen Wert oder einen Ersatz willst, braucht es viel Code:

type Waffe = { name: string; schaden: number };
type Held = { name: string; waffe?: Waffe };

const kira: Held = { name: "Kira", waffe: { name: "Elfenbogen", schaden: 8 } };
const lena: Held = { name: "Lena" };

let waffenName = "keine Waffe";
if (lena.waffe !== undefined) {
    waffenName = lena.waffe.name;
}
console.log(waffenName);

JavaScript hat zwei Operatoren, die das kürzer machen, und TypeScript versteht beide.

Der Operator für optionales Verketten (englisch optional chaining) ?. liest eine Eigenschaft nur, wenn der Wert davor existiert. lena.waffe?.name bedeutet: Wenn lena.waffe den Wert undefined oder null hat, ist das Ergebnis undefined; sonst ist es lena.waffe.name. Kein Absturz, kein Fehler:

type Waffe = { name: string; schaden: number };
type Held = { name: string; waffe?: Waffe };

const kira: Held = { name: "Kira", waffe: { name: "Elfenbogen", schaden: 8 } };
const lena: Held = { name: "Lena" };

console.log(kira.waffe?.name);
console.log(lena.waffe?.name);

Das gibt aus:

Elfenbogen
undefined

Mit einem einfachen Punkt, lena.waffe.name, würde TypeScript error TS18048: 'lena.waffe' is possibly 'undefined'. melden. Es weiß auch, dass das Ergebnis von ?. fehlen kann: Der Typ von lena.waffe?.name ist string | undefined.

Der Operator Nullish Coalescing ?? liefert einen Ersatz für einen fehlenden Wert. a ?? b ist a, außer a ist null oder undefined; dann ist es b. Die beiden Operatoren passen gut zusammen:

console.log(kira.waffe?.name ?? "keine Waffe");
console.log(lena.waffe?.name ?? "keine Waffe");

Das gibt aus:

Elfenbogen
keine Waffe

Der Typ von lena.waffe?.name ?? "keine Waffe" ist nur string: TypeScript weiß, dass ?? den fehlenden Fall aufgefüllt hat. Du kannst ihn in einer string-Variablen speichern oder aus einer Funktion zurückgeben, die string zurückgibt. Ohne ?? ist das return einer solchen Funktion ein Fehler: Type 'string | undefined' is not assignable to type 'string'.

Du siehst vielleicht auch || für Ersatzwerte. Außer mit true und false funktioniert a || b mit beliebigen Werten: Es ergibt a, wenn a als wahr gilt, sonst b. Aber 0 und der leere Text "" gelten als falsch, deshalb ersetzt || auch sie, während ?? nur null und undefined ersetzt. Bei Zahlen ist der Unterschied wichtig:

const pfeile = 0;
console.log(pfeile || 10);
console.log(pfeile ?? 10);

Das gibt aus:

10
0

Ein Held ohne Pfeile hat 0 Pfeile, nicht 10. Wenn du „falls es fehlt“ meinst, verwende ??.

Typischer Fehler: ?. an der falschen Stelle. Es steht direkt hinter dem Wert, der fehlen kann: lena.waffe?.name, denn waffe ist optional. lena?.waffe.name prüft lena, die immer existiert, und TypeScript meldet trotzdem 'lena.waffe' is possibly 'undefined'.