ProgrammierungFrontend-Entwickler / TypeScript-Entwickler

Wie wird die strikte Typisierung von Arrays und Tupeln in TypeScript implementiert und wozu wird sie verwendet? Was sind die Unterschiede und Fallstricke bei der Verwendung?

Bestehen Sie Vorstellungsgespräche mit dem Hintsage-KI-Assistenten

Antwort

In TypeScript können Arrays strikt typisiert werden, indem der Typ der Elemente durch type[] oder Array<type> angegeben wird. Zum Beispiel:

let arr: number[] = [1, 2, 3];

Tupel sind Arrays mit einer festen Länge und Typen für jedes Element:

let tuple: [string, number] = ["age", 30];
  • Array: erlaubt eine beliebige Anzahl von Elementen desselben Typs.
  • Tupel: fixiert strikt die Anzahl und Reihenfolge der Typen. Erlaubt das Erstellen von Strukturen wie Datensätzen oder das Zurückgeben von Werten unterschiedlichen Typs aus einer Funktion.

Fallstricke:

  • Bei der Verwendung von Array-Methoden (push, pop) an Tupeln ist push nicht verboten, aber das Ergebnis überschreitet bereits die garantierte Typisierung.
  • Unvorsichtige Erweiterung von Tupeln führt zu "unsicherem" Code.
  • Destrukturierung von Tupeln in Funktionen: Falsch angegebener Typ oder Länge führt zu einem Fehler.

Fangfrage

Können Tupel in TypeScript eine variable Anzahl von Elementen enthalten und wie wirkt sich das auf die Typisierung aus?

Antwort: Ja, Tupel können Rest-Elemente mit dem ...-Syntax enthalten, erfordern aber dennoch eine strikte Typisierung der verbleibenden Elemente:

let tuple: [string, ...number[]] = ["id", 10, 20, 30];

Allerdings müssen die Elemente vor ... angegeben werden, und der Typ für das übrige Array muss einheitlich sein.

Beispiele für reale Fehler aufgrund mangelnden Wissens über die Feinheiten des Themas


Geschichte

In einem E-Commerce-Projekt versuchte ein Entwickler, mehr als zwei Elemente in das Tupel [string, number] mit push zu speichern. Dies führte nicht zu einem Fehler zur Kompilierungszeit, brach aber die Funktion, die genau zwei Elemente erwartete, was zu Fehlern bei der Bearbeitung von Bestellungen führte.


Geschichte

Eine Funktion gab ein Tupel [string, number] zurück, der Konsument erwartete jedoch ein Array von Strings. Der Typenkonflikt verursachte einen schwer fassbaren Fehler, wodurch inkorrekte Werte in die Produktion gelangten.


Geschichte

Bei der Migration von Code von JavaScript nach TypeScript wurden Arrays anstelle von Tupeln verwendet, um mehrere Werte unterschiedlichen Typs zurückzugeben. Dies verletzte die strikte Typisierung und führte zu Bugs im späteren Code, der sich auf die Reihenfolge und den Typ der Werte verließ.