Antwort.

Geschichte der Frage:

Union Types wurden in TypeScript eingeführt, um Variablen und Parameter zu beschreiben, die Werte unterschiedlicher Typen annehmen können. Diese Möglichkeit hat die Flexibilität der Typisierung im Vergleich zu klassischen Programmiersprachen erheblich erweitert.

Problem:

In JavaScript sind Funktionen und Variablen oft mehrdeutig (z. B. können sie eine Zahl oder einen String annehmen), was eine sichere Typisierung erschwert. Ohne Union Types musste man 'any' verwenden oder den Code duplizieren. Dies erhöhte die Anzahl der Fehler in der Produktion und erschwerte die Zusammenarbeit in großen Teams.

Lösung:

Union Types ermöglichen es, eine Variable zu deklarieren, die einen von mehreren Typen annehmen kann, und garantieren korrekte Operationen nach der Überprüfung. Außerdem wird die Unterstützung für die Typverengung (Type Narrowing) bereitgestellt, was dem Compiler hilft, zu „verstehen“, womit er es zu tun hat.

Beispielcode:

function formatId(id: number | string): string {
  if (typeof id === 'string') {
    return id.toUpperCase();
  }
  return id.toString();
}

Schlüsselfunktionen:

Ermöglichen es, potenzielle Typen von Variablen und Parametern explizit anzugeben.
Arbeiten zusammen mit dem Mechanismus der Typverengung durch Prüfungen (z. B. typeof oder in).
Erschweren die Arbeit mit Objekten, bei denen derselbe Schlüssel unterschiedliche Typen haben kann – es erfordert eine sorgfältige Verwaltung der Zugriffslogik.

Fangfragen.

Kann man eine Union von Objekten mit unterschiedlichen Eigenschaften erstellen und auf jede Eigenschaft ohne Überprüfung zugreifen?

Nein. Union Types erlauben den Zugriff nur auf die Eigenschaften und Methoden, die in allen Typen vorhanden sind. Für den Zugriff auf spezifische Eigenschaften ist eine Typverengung erforderlich.

Beispielcode:

type Fish = { swim: () => void; };
type Bird = { fly: () => void; };

function move(animal: Fish | Bird) {
  // animal.swim(); // Fehler ohne Verengung
  if ('swim' in animal) {
    animal.swim(); // OK
  }
}

Warum sind nicht alle Methoden für den Union Typ string | number verfügbar?

TypeScript erlaubt in Union nur das, was in allen enthaltenen Typen vorhanden ist. Für individuelle Methoden muss man zuerst den tatsächlichen Typ überprüfen.

Was passiert, wenn man den Typ in einer Union nicht prüft und versucht, eine spezifische Methode aufzurufen?

In diesem Fall tritt ein Kompilierungsfehler auf, da die Existenz der Methode nicht garantiert ist. Es funktioniert nur nach der Überprüfung des spezifischen Typs.

Typische Fehler und Antipatterns

Überspringen der Typüberprüfung vor der Verwendung (kann zu Zugriffsfehlern führen).
Beschreibung von zu breiten Union Typen (verliert die Typensicherheit).
Falsche Verengung führt zu unsichtbaren Fehlern und not exhaustive checks.

Praxisbeispiel

Negativer Fall

Der Variablen wurde der Typ string | number zugewiesen und ohne Überprüfung wurde toUpperCase() ausgeführt. Infolgedessen stürzt die Anwendung bei numerischen Daten ab.

Vorteile:

Schnell geschriebener Code.

Nachteile:

Laufzeitfehler.
Vertrauensverlust in die statische Typisierung von TypeScript.

Positiver Fall

Überprüfen wir den Typ vor der Arbeit mit der Methode:

if (typeof value === 'string') {
  return value.toUpperCase();
} else {
  return value.toString();
}