Arrays und Tupel

In JavaScript können Arrays jeden beliebigen Elementtyp enthalten und dynamisch wachsen oder schrumpfen. TypeScript fügt eine statische Typprüfung hinzu, um sicherzustellen, dass die Kollektionen homogen bleiben oder einer festen Typstruktur entsprechen.

Arrays (Homogene Kollektionen)

In TypeScript gibt es zwei äquivalente Möglichkeiten, den Typ eines Arrays zu definieren, das Elemente desselben Typs enthält:

1. Verwenden des Elementtyps gefolgt von eckigen Klammern ([]):

   TS

   Kopieren

   const numbers: number[] = [1, 2, 3];
   const strings: string[] = ['a', 'b', 'c'];

2. Verwenden des generischen Typs Array<T>:

   TS

   Kopieren

   const numbers: Array<number> = [1, 2, 3];

Beide Schreibweisen sind vollkommen gültig, aber die erste (typ[]) ist die konventionelle und in fast allen Projekten gebräuchlichste. Wenn Sie versuchen, einen ungültigen Wert einzufügen (z. B. numbers.push("hello") in ein Array vom Typ number[]), gibt TypeScript einen Compilerfehler aus.

Tupel (Strukturen mit fester Größe)

Ein Tupel ist eine spezielle Art von Array, das eine feste Anzahl von Elementen hat und bei dem jedes Element einen vordefinierten spezifischen Typ basierend auf seiner genauen Position hat.

Wenn wir beispielsweise eine HTTP-Antwort speichern möchten, die aus einem Statuscode (Zahl) und einer Nachricht (String) besteht:

const response: [number, string] = [200, 'OK'];

In diesem Fall:

• Das erste Element (response[0]) muss eine number sein.
• Das zweite Element (response[1]) muss ein string sein.
• Das Array muss mit genau 2 Elementen initialisiert werden.

Schreibgeschützte Tupel (readonly)

Ein wichtiges Detail bei Tupeln in TypeScript ist, dass sie zur Laufzeit normale JavaScript-Arrays sind. Dies bedeutet, dass Methoden wie .push() oder .pop() technisch verfügbar sind und die Länge des Tupels verändern könnten, wodurch die Typprüfungen teilweise umgangen werden.

Um dieses Verhalten zu verhindern und echte Unveränderlichkeit zu garantieren, können wir den Modifikator readonly verwenden:

const point: readonly [number, number] = [10, 20];
// point.push(30); // Errore a tempo di compilazione!

Probier es aus

Esercizio 1: Array von Zahlen

Esercizio 2: Tupel 3D-Koordinaten

Esercizio 3: Tupel Standortinformationen

Esercizio 4: Tupel Protokollzeile