Multiple Datentypen in Arrays mit Union Types

In TypeScript können Sie Arrays definieren, die mehrere Datentypen enthalten, indem Sie Union Types verwenden. Ein Union Type ist ein Typ, der einen von mehreren möglichen Typen darstellen kann. Sie definieren Union Types, indem Sie die möglichen Typen mit einem vertikalen Balken (|) auflisten.

35.1 Definition von Union Types in Arrays

Zum Beispiel kann ein Array, das sowohl Zahlen als auch Strings enthält, wie folgt definiert werden:

let arr: (number | string)[] = [1, 'a', 2, 'b', 3, 'c'];

In diesem Beispiel kann arr sowohl Zahlen als auch Strings enthalten. Ein Versuch, einen Wert eines anderen Typs hinzuzufügen, führt zu einem TypeScript-Fehler:

arr.push(true); // Fehler: 'boolean' kann nicht dem Typ 'string | number' zugewiesen werden.

35.2 Verwendung von Type Guards

Beim Arbeiten mit Union Types in Arrays ist es oft notwendig, Type Guards zu verwenden, um den Typ eines Elements zur Laufzeit zu überprüfen. Dies stellt sicher, dass Sie auf die spezifischen Eigenschaften jedes Typs sicher zugreifen können:

arr.forEach((element) => {
  if (typeof element === 'string') {
    console.log(`String: ${element.toUpperCase()}`);
  } else {
    console.log(`Number: ${element.toFixed(2)}`);
  }
});

35.3 Erweiterte Union Types

Union Types können auch komplexe Typen umfassen, wie Interfaces oder Typ-Aliase, was Ihnen ermöglicht, noch flexiblere und leistungsfähigere Datentypen zu erstellen:

type StringOrNumber = string | number;
let mixedArray: StringOrNumber[] = [1, 'two', 3];

35.4 Praktische Anwendungsfälle

In realen Projekten werden Arrays mit Union Types häufig verwendet, um heterogene Datenstrukturen zu verarbeiten, wie z.B. eine Kombination aus verschiedenen Entitätstypen oder verschiedenen Antwortformaten von einer API.

35.5 Einschränkungen und Herausforderungen

Eine Herausforderung bei der Verwendung von Arrays mit Union Types ist, dass Sie möglicherweise häufig Type Guards verwenden müssen, um Typsicherheit zu gewährleisten. Dies kann den Code komplexer machen und erfordert ein sorgfältiges Design.

35.6 Interaktion mit Array-Methoden

TypeScript bietet Typinferenz, die auch bei der Verwendung von Array-Methoden wie .map(), .filter() und .reduce() mit Union Types funktioniert:

let filteredNumbers = arr.filter((element): element is number => typeof element === 'number');

In diesem Beispiel filtert filteredNumbers alle Zahlen aus dem ursprünglichen Array heraus, indem es einen Type Guard innerhalb der .filter()-Methode verwendet.

35 Multiple Datentypen in Arrays mit Union Types