Union Types

Union Types stellen Werte dar, die einen von mehreren Typen darstellen können.

const printId = (id: number | string) => {
  console.log(`ID: ${id}`);
}

Der senkrechte Strich kann als “oder” gelesen werden. Dies ist nützlich, wenn du mehrere Typen akzeptieren willst.

Du kannst auch einen benannten Union-Typ deklarieren.

type Id = number | string;

Diesen kannst du dann wie einen normalen Type verwenden.

const printId = (id: Id) => {
  console.log(`ID: ${id}`);
}

Union Types sind auch bei literalen Typen oft nützlich.

type Direction = "left" | "right" | "up" | "down";

const move = (direction: Direction) => {
  console.log(`Moving ${direction}`);
}

Mit Union Types können wir auch Objekte verwenden.

type Vehicle = { hasWheels: boolean } | { canFly: boolean };

const car: Vehicle = { hasWheels: true };
const airplane: Vehicle = { canFly: true };
const flyingCar: Vehicle = { hasWheels: true, canFly: true };
flyingCar.hasWheels = true;

HTML

CSS

JavaScript

TypeScript

React

Angular