Tupel

Manchmal hat ein Array eine feste Anzahl von Elementen, und jede Stelle darin hat ihre eigene Bedeutung: Eine Position auf einer Karte ist [x, y], ein Gegenstand mit seiner Anzahl ist ["Pfeil", 20]. Für solche Arrays hat TypeScript Tupel: Typen, die den Typ jedes Elements der Reihe nach auflisten:

const position: [number, number] = [3, 5];
const pfeile: [string, number] = ["Pfeil", 20];

console.log(`${pfeile[0]} x${pfeile[1]} bei ${position[0]}, ${position[1]}`);

Das gibt aus:

Pfeil x20 bei 3, 5

[string, number] bedeutet genau zwei Elemente: zuerst einen Text, dann eine Zahl. TypeScript kennt den Typ jedes einzelnen: pfeile[0] ist ein string und pfeile[1] eine number.

Ein Tupel-Typ muss als Annotation geschrieben werden: Allein aus den Werten leitet TypeScript kein Tupel ab. Aus [3, 5] leitet TypeScript number[] ab, ein Array aus Zahlen beliebiger Länge. Aus ["Pfeil", 20] leitet es (string | number)[] ab, ein Array beliebiger Länge, dessen Elemente in beliebiger Reihenfolge Texte oder Zahlen sein können. (| bedeutet „oder“; mehr dazu in der Lektion „Unions und Eingrenzen“.)

Die Reihenfolge zählt. Sind die Werte vertauscht, meldet TypeScript beide:

const trank: [string, number] = [2, "Heiltrank"];

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

Auch die Länge ist fest. Ein Paar hat kein drittes Element, deshalb meldet TypeScript den Versuch, eines zu lesen:

const position: [number, number] = [3, 5];
console.log(position[2]);

main.ts(2,22): error TS2493: Tuple type '[number, number]' of length '2' has no element at index '2'.

In JavaScript wäre position[2] stillschweigend undefined. Wenn das Programm läuft, ist ein Tupel ein gewöhnliches JavaScript-Array, und console.log(pfeile) gibt ["Pfeil", 20] aus. Der Tupel-Typ sagt TypeScript nur, was es prüfen soll.

Typische Fehler:

• Ein Wert mit einem zusätzlichen Element: const pfeile: [string, number] = ["Pfeil", 20, 5]; ergibt eine Meldung über zwei Zeilen: Type '[string, number, number]' is not assignable to type '[string, number]'. und darunter Source has 3 element(s) but target allows only 2. Die zweite Zeile erklärt die erste.
• [number] statt number[]: [number] ist ein Tupel mit genau einer Zahl, number[] ein Array aus beliebig vielen Zahlen.