Wie beschreibt man Typen für komplexe Datenstrukturen (z. B. verschachtelte Objekte, Arrays mit unterschiedlichen Typen) in TypeScript? Welche Ansätze gibt es und welche Fallstricke treten normalerweise auf? Geben Sie praktische Beispiele an.

Antwort.

Zur Beschreibung komplexer Datenstrukturen in TypeScript werden Interfaces (interface) und Typalias (type) verwendet. Sie können mit Objekten, Arrays und verschachtelten Typen kombiniert werden, um komplexe Sammlungen streng zu typisieren.

Für ein verschachteltes Objekt:

interface Address {
  city: string;
  zip: number;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
}

Für ein Array mit unterschiedlichen Typen:

// Tupel
let tuple: [string, number] = ['John', 30];

// Arrays mit Union-Typen
let arr: (string | number)[] = [1, 'a', 2, 'b'];

// Array von Objekten
let users: UserProfile[] = [ {...}, {...} ];

Wenn die Strukturen komplex sind und es optionale Felder gibt, verwendet man ?, kombiniert mit den Typen Partial, Record, Mapped Types oder rekursiven Typen für verschachtelte Bäume.

Fangfrage.

Frage: Kann man ein Interface verwenden, um ein Array mit unterschiedlichen Elementtypen (z. B. [string, number, boolean]) zu beschreiben?

Antwort: Nein. Für solchen Fälle ist es besser, Tupel zu verwenden – Interfaces eignen sich nicht für feste Positionen und Typen. Tupel erlauben es, die Typen für jede Position genau festzulegen.

type MyTuple = [string, number, boolean];
let foo: MyTuple = ['ok', 12, false];

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

---

Geschichte

In einem Projekt wurde eine komplexe Struktur falsch beschrieben: Für ein Array mit gemischten Typen wurde any[] statt eines korrekten Tupels oder Union-Typs verwendet. Infolgedessen enthielt eines der Elemente einen Wert eines falschen Typs, was zu einem Fehler in der Geschäftslogik führte (arithmetische Operation mit einem String).

---

Geschichte

In der Datenstruktur waren tief verschachtelte Objekte ohne Verwendung rekursiver Typen oder Partial deklariert. Der Versuch, einen neuen Teilbaum zu einem Knoten hinzuzufügen, führte zu einem Compilerfehler, und die Entwickler umgingen dies durch Downcast in any, was dann zu Laufzeitfehlern in der Produktion führte.

---

Geschichte

Das Objekt mit der Beschreibung des Benutzerprofils war teilweise optional, aber der Entwickler verwendete kein ?. Bei der Datenabfrage vom Server gab es keine TypeScript-Fehler, aber die Anwendung stürzte ab, wenn sie versuchte, auf Felder zuzugreifen, die im Objekt nicht existierten.