Union-Typen

Nicht jeder Wert hat nur einen Typ. Wenn Kira einen Auftrag erledigt, ist ihre Belohnung manchmal Gold, eine Zahl wie 50, und manchmal ein Gegenstand, ein Text wie "Silberschwert". Mit den Typen, die du bisher kennst, kann eine Variable nicht beides enthalten:

let belohnung = 50;
belohnung = "Silberschwert";

main.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.

Für solche Werte hat TypeScript Union-Typen. Du schreibst mehrere Typen mit einem senkrechten Strich | dazwischen und liest den Strich als „oder“: number | string ist „eine Zahl oder ein Text“.

let belohnung: number | string = 50;
console.log(belohnung);
belohnung = "Silberschwert";
console.log(belohnung);

Das gibt aus:

50
Silberschwert

Jetzt darf belohnung eine Zahl oder einen Text enthalten, aber immer noch nichts anderes. Wenn du am Ende die Zeile belohnung = true; hinzufügst, meldet TypeScript:

main.ts(5,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.

In der Meldung steht die Union als string | number, obwohl im Code number | string steht. Die Reihenfolge spielt keine Rolle: Beides ist derselbe Typ. Eine Union kann auch mehr Glieder haben, etwa string | number | boolean. Und du hast schon einmal eine Union getroffen: Ein optionaler Parameter titel?: string hat den Typ string | undefined.

Am nützlichsten sind Unions bei Parametern. Diese Funktion akzeptiert beide Arten von Belohnung:

function zeigeBelohnung(belohnung: string | number): void {
    console.log(`Deine Belohnung: ${belohnung}`);
}

zeigeBelohnung(50);
zeigeBelohnung("Silberschwert");

Das gibt aus:

Deine Belohnung: 50
Deine Belohnung: Silberschwert

Aber was darf die Funktion mit belohnung tun? Nur das, was für jeden Typ der Union funktioniert. Ausgeben funktioniert für Zahlen und Texte gleichermaßen, ebenso ein Template-Literal. Eine Textmethode nicht:

function belohnungLaut(belohnung: string | number): string {
    return belohnung.toUpperCase();
}

main.ts(2,22): error TS2339: Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.

Diese Meldung hat zwei Zeilen. Die erste sagt, dass die Union string | number kein toUpperCase hat, und die eingerückte zweite Zeile sagt dir, warum: number hat es nicht. TypeScript kann nicht wissen, welchen Typ die Funktion bekommt, wenn sie läuft. Bekäme sie 50, würde JavaScript mit TypeError: belohnung.toUpperCase is not a function abstürzen. TypeScript erlaubt also nur, was für beide Typen sicher ist. Mit Rechnen ist es dasselbe: belohnung * 2 ist ebenfalls ein Fehler, weil die Belohnung ein Text sein könnte.

In der nächsten Übung lernst du, wie du herausfindest, welchen Typ ein Wert hat, damit du Textmethoden auf Texte und Rechenoperationen auf Zahlen anwenden kannst.

Typischer Fehler: zwei Striche statt einem. In Typen ist der Strich einfach; let belohnung: number || string = 50; ist kein gültiges TypeScript, und der Compiler verliert den Faden:

main.ts(1,23): error TS1005: ',' expected.
main.ts(1,33): error TS1005: ';' expected.