Optionale Eigenschaften

Nicht jeder Held hat einen Spitznamen. Setze bei einer Eigenschaft, die fehlen darf, ein Fragezeichen hinter den Namen, genau wie bei optionalen Parametern:

type Held = { name: string; stufe: number; spitzname?: string };

const kira: Held = { name: "Kira", stufe: 3, spitzname: "Flinker Pfeil" };
const bruno: Held = { name: "Bruno", stufe: 2 };

console.log(bruno);
console.log(bruno.spitzname);

Das gibt aus:

{ name: "Bruno", stufe: 2 }
undefined

Eine optionale Eigenschaft darf im Objekt fehlen, und TypeScript meldet sie dann nicht als fehlend. Wenn du sie liest, bekommst du ihren Wert oder undefined, wenn sie nicht da ist, genau wie in JavaScript. Der Typ von bruno.spitzname ist also string | undefined, und bevor du ihn als String verwendest, will TypeScript eine Prüfung sehen:

type Held = { name: string; stufe: number; spitzname?: string };

const kira: Held = { name: "Kira", stufe: 3, spitzname: "Flinker Pfeil" };
console.log(kira.spitzname.toUpperCase());

main.ts(4,13): error TS18048: 'kira.spitzname' is possibly 'undefined'.

Kira hat einen Spitznamen, und TypeScript meldet es trotzdem. Es schaut nicht auf den Wert, sondern auf den Typ: kira ist ein Held, und der Spitzname eines Helden kann fehlen. Prüfe ihn auf dieselbe Weise wie einen optionalen Parameter:

type Held = { name: string; stufe: number; spitzname?: string };

function heldenTitel(held: Held): string {
    if (held.spitzname === undefined) {
        return held.name;
    }
    return `${held.name} "${held.spitzname.toUpperCase()}"`;
}

console.log(heldenTitel({ name: "Kira", stufe: 3, spitzname: "Flinker Pfeil" }));
console.log(heldenTitel({ name: "Bruno", stufe: 2 }));

Das gibt aus:

Kira "FLINKER PFEIL"
Bruno

Du kannst eine optionale Eigenschaft auch später setzen: bruno.spitzname = "der Bär"; ist in Ordnung, denn der Typ sagt, dass ein Held einen Spitznamen haben darf. Eine Eigenschaft, die nicht im Typ steht, kannst du nicht hinzufügen, das weißt du schon.

Wann sollte eine Eigenschaft optional sein? Wenn es normal ist, dass sie fehlt: ein Spitzname, eine Schwäche, eine Waffe, die der Held noch nicht hat. Wenn jedes Objekt die Eigenschaft haben muss, lass sie erforderlich. Dann prüft TypeScript, dass du sie nicht vergessen hast.

Typische Fehler:

• Die Eigenschaft ohne Prüfung zu verwenden: 'kira.spitzname' is possibly 'undefined'.
• Sie ohne Prüfung in ein Template-Literal zu schreiben. TypeScript hält dich dabei nicht auf: ${bruno.spitzname} wird zum Text undefined.