Deklarieren von und Zugriff auf Tupel

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 16 von 73.

Die Syntax für die Erstellung eines Tupels ist einfach: Sie geben die Typen jedes Elements in eckigen Klammern an, und zwar in der genauen Reihenfolge, in der sie erscheinen sollen.

Um ein Tuple zu deklarieren, verwenden Sie das Format [Type1, Type2, Type3], wobei jeder Typ einer bestimmten Position entspricht:

let productInfo: [string, number] = ["Laptop", 999];
let coordinates: [number, number] = [10, 20];
let userRecord: [number, string, boolean] = [1, "Alice", true];

Der Zugriff auf Tupel-Elemente funktioniert genau wie der Zugriff auf Array-Elemente mittels Index-Notation. TypeScript kennt den genauen Typ an jeder Position, sodass Sie volle Typsicherheit erhalten:

let product: [string, number] = ["Phone", 599];
console.log(product[0]); // "Phone" (TypeScript weiß, dass dies ein String ist)
console.log(product[1]); // 599 (TypeScript weiß, dass dies eine Zahl ist)

Der entscheidende Vorteil ist, dass TypeScript sowohl den korrekten Typ als auch die korrekte Position erzwingt. Wenn Sie versuchen, auf product[0].toFixed() zuzugreifen, wird TypeScript den Fehler abfangen, da es weiß, dass das erste Element ein String und keine Zahl ist.

Aufgabe

Einfach

Erstellen Sie ein Tuple namens productInfo, das einen String (Produktname) gefolgt von einer Zahl (Preis) enthält. Initialisieren Sie es mit dem Produktnamen "Gaming Mouse" und dem Preis 79.

Erstellen Sie dann ein weiteres Tuple namens coordinates, das zwei Zahlen enthält, die x- und y-Positionen darstellen. Initialisieren Sie es mit den Werten 15 und 25.

Greifen Sie auf den Produktnamen aus dem productInfo-Tuple zu und geben Sie ihn aus.

Greifen Sie auf den Preis aus dem productInfo-Tuple zu und geben Sie ihn aus.

Greifen Sie auf die x-Koordinate aus dem coordinates-Tuple zu und geben Sie sie aus.

Greifen Sie auf die y-Koordinate aus dem coordinates-Tuple zu und geben Sie sie aus.

Geben Sie jeden Wert in einer separaten Zeile in der oben angegebenen Reihenfolge aus.

Probier es selbst

// TODO: Schreiben Sie hier Ihren Code
// Erstellen Sie das productInfo-Tupel mit Produktname und Preis
// Erstellen Sie das coordinates-Tupel mit x- und y-Positionen
// Greifen Sie auf jeden Wert wie angegeben zu und geben Sie ihn aus