Unions und Type Narrowing

In der Praxis haben Variablen und API-Antworten nicht immer einen einzigen festen Typ. TypeScript bietet Union-Typen (Union Types) zur Verwaltung dieser Variabilität und das Einschränken von Typen (Type Narrowing), um zur Laufzeit sicher mit ihnen zu arbeiten.

Union-Typen (Union Types)

Ein Union-Typ erlaubt es einer Variablen, Werte verschiedener Typen zu akzeptieren. Er wird durch das vertikale Strichsymbol (|) ausgedrückt:

let result: number | string;
result = 42; // Valido
result = 'Errore 404'; // Valido

Wenn wir jedoch mit einem Union-Typ arbeiten, können wir Methoden, die nur zu einem der Typen gehören, nicht direkt aufrufen (z. B. können wir .toUpperCase() nicht ausführen, wenn die Variable auch eine number sein kann). Wir müssen zuerst den Typ einschränken.

Einschränken von Typen (Type Narrowing)

Unter Type Narrowing versteht man den Prozess, bei dem TypeScript Kontrollflussstrukturen (wie if oder switch) analysiert, um zur Laufzeit auf einen spezifischeren Typ für eine Variable zu schließen.

Es gibt verschiedene Möglichkeiten, das Einschränken durchzuführen:

1. Der Operator typeof

Ideal zur Unterscheidung primitiver Typen:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // Qui TypeScript sa che 'value' è una stringa
    console.log(value.length);
  } else {
    // Qui TypeScript sa che 'value' è un numero
    console.log(value.toFixed(2));
  }
}

2. Der Operator in

Wird verwendet, um das Vorhandensein einer bestimmten Eigenschaft in einem Objekt zu überprüfen:

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

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing a Fish
  } else {
    animal.fly(); // Narrowing a Bird
  }
}

Diskriminierte Unions (Discriminated Unions)

Das Muster der diskriminierten Unions besteht darin, Objekte zu erstellen, die eine gemeinsame Eigenschaft mit einem eindeutigen Literalwert (dem sogenannten Diskriminator) teilen. TypeScript erkennt diesen Diskriminator und führt innerhalb von bedingten Blöcken automatisch ein Type Narrowing durch.

interface SuccessResponse {
  status: 'success'; // Discriminatore letterale
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Discriminatore letterale
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Dati ricevuti:', response.data);
  } else {
    console.error('Si è verificato un errore:', response.errorMessage);
  }
}

Probier es aus

Esercizio 1: Union-Typen

Esercizio 2: Einfaches Type Narrowing

Esercizio 3: Narrowing mit 'in'

Esercizio 4: Diskriminierte Union Shape