NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Grünes Tor mit drei Formöffnungen und gelbem Schild UNION TYPES

Was sind Union Types in TypeScript?

Ein Union Type in TypeScript beschreibt einen Wert, der einen von mehreren Typen haben darf. Geschrieben wird er mit dem senkrechten Strich. Solange du nicht geprüft hast, welcher Fall vorliegt, darfst du nur das nutzen, was alle Typen der Union gemeinsam haben.
Code: 
          
type Id = string | number;
type Status = "entwurf" | "pruefung" | "online";

let status: Status = "online";
status = "archiviert"; // Fehler: Wert ist nicht erlaubt
Die zweite Zeile ist im Alltag die wichtigere. Eine Union aus festen Texten heißt Literal Union und ersetzt einen beliebigen string durch eine klare Auswahl. Der Editor schlägt die Werte vor, Tippfehler fallen sofort auf.
Inhalt
NCA KI Workshop für Developer

Agentic Coding im Team, nicht nur im Glossar

Ein Tag inhouse mit Benjamin Klein für Developer, Tester und Admins. Context Engineering, Harness, ADRs und zwei Hands on Blöcke mit KI Agenten in eurem Setup.

  1. 1
    Kostenloses Vorgespräch
    Stand, Rollen und Ziele klären
  2. 2
    Workshoptag bei euch
    Praxis am Vormittag, Hands on danach
  3. 3
    Praxistag optional
    Agenten im eigenen Projekt
Benjamin Klein
Benjamin Klein
Senior Consultant
Zum Workshop für Developer arrow_forward

Wir bringen sauberes Datenmodell in dein Frontend

In Astro, React und Vue Projekten sitzen die meisten Union Types dort, wo Daten zu Oberfläche werden: Ladezustände, Varianten, API Antworten. Beim Umstieg auf den strict Mode stoßen wir oft auf Objekte voller optionaler Felder. Genau dort lohnt der Umbau.

Wir modellieren solche Zustände mit dir neu und sichern sie mit dem never Type ab. Im Vibe Coding Consulting kommen die passenden Regeln für KI Agents dazu. Bei größeren Altlasten hilft Vibe Coding Projekt retten.

Optionale Felder erlauben Zustände, die es nie geben darf

Ein Ladezustand wird oft so geschrieben. Das sieht ordentlich aus, lässt aber Kombinationen zu, die keinen Sinn ergeben: gleichzeitig laden und fertig, Daten und Fehler zusammen, oder gar nichts davon.
Code: 
          
type Zustand = {
  laedt: boolean;
  daten?: string[];
  fehler?: string;
};

// Alles gültig, das meiste davon Unsinn
const a: Zustand = { laedt: true, daten: [], fehler: "Timeout" };
const b: Zustand = { laedt: false };
Jede Komponente muss diese Fälle dann selbst abfangen, und irgendwann vergisst das jemand. In der Oberfläche bleibt eine Stelle leer, und niemand weiß warum.

Eine Discriminated Union lässt nur gültige Zustände zu

Eine Discriminated Union ist eine Union aus Objekten mit einem gemeinsamen Feld, dessen Wert jeden Fall eindeutig kennzeichnet. Prüfst du dieses Feld, weiß der Compiler genau, welche anderen Felder vorhanden sind.
Code: 
          
type Zustand =
  | { status: "laedt" }
  | { status: "fertig"; daten: string[] }
  | { status: "fehler"; meldung: string };

function anzeigen(zustand: Zustand): string {
  if (zustand.status === "fehler") {
    return zustand.meldung; // hier gibt es meldung
  }
  if (zustand.status === "fertig") {
    return zustand.daten.join(", "); // hier gibt es daten
  }
  return "Lädt";
}

Daten und Fehler können jetzt nicht mehr gleichzeitig existieren. Ein Zugriff auf daten ohne Prüfung ist ein Compilerfehler. Damit auch kein neuer Fall vergessen wird, gehört ans Ende ein Exhaustive Check mit never.

Literal Union, Enum und as const im Vergleich

Schreibweise Erzeugt Code zur Laufzeit Passt gut für
Literal Union Nein Feste Werte, die nur der Compiler kennen muss
Objekt mit as const Ja, ein normales Objekt Werte, die du auch zur Laufzeit durchlaufen willst
Enum Ja, eigene Struktur Bestehenden Code, der schon damit arbeitet

So leitest du eine Union aus vorhandenen Werten ab

Wer dieselben Werte als Liste und als Typ braucht, pflegt sie sonst doppelt. Mit as const entsteht der Typ direkt aus der Liste. Kommt ein Wert dazu, wächst die Union automatisch mit.
Code: 
          
const ROLLEN = ["admin", "redaktion", "gast"] as const;
type Rolle = (typeof ROLLEN)[number];
// "admin" | "redaktion" | "gast"

ROLLEN.forEach((rolle) => console.log(rolle));
Für Daten von außen reicht das nicht. Ob eine API wirklich nur diese drei Rollen liefert, entscheidet sich erst zur Laufzeit und gehört an der Systemgrenze geprüft.

A union type is a type formed from two or more other types

TypeScript Handbook, Offizielle TypeScript Dokumentation von Microsoft – typescriptlang.org, Kapitel Everyday Types

Wenig optionale Felder machen auch KI Code besser

Ein Agent orientiert sich an den Typen, die er im Projekt vorfindet. Ist ein Zustand klar als Union beschrieben, hat er weniger Raum für falsche Annahmen, und der Compiler meldet ihm jeden Griff ins Leere. Die Regel dazu gehört in die AI Coding Guidelines für TypeScript, geprüft wird sie über die Quality Gates für KI Code.

Wie du eine Union im Code eingrenzt, zeigen die Type Guards. Für Konfiguration im Code passt dazu satisfies, für fremde Daten unknown und Zod. Den Überblick zur Sprache gibt der TypeScript Eintrag.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Frontend: Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile der Barrierefreiheit

Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile einer schnellen, sicheren und barrierefreien Webseite. Erfüllen Sie die gesetzlichen Anforderungen und verbessern Sie die Benutzererfahrung Ihrer Webseite. Mit Astro JS können Sie die Ladezeit reduzieren, die Sicherheit maximieren und die SEO-Optimierung verbessern. Kontaktieren Sie uns, um mehr zu erfahren und um Ihre Webseite auf ein neues Level zu heben.

E-Mail Kontakt

Häufige Fragen zu TypeScript Union Types

Kurze Antworten auf das, was beim Modellieren mit Unions oft unklar bleibt.
Was ist ein Union Type in TypeScript 2026?

Ein Union Type erlaubt einen Wert aus mehreren möglichen Typen, geschrieben mit dem senkrechten Strich, etwa string | number. Vor einer Prüfung darfst du nur nutzen, was alle Typen gemeinsam haben. Danach kennt der Compiler den konkreten Fall.

Was ist 2026 eine Discriminated Union?

Eine Union aus Objekten, die ein gemeinsames Feld mit festem Wert haben, zum Beispiel status. Prüfst du dieses Feld, weiß der Compiler, welche weiteren Felder vorhanden sind. So lassen sich Zustände sauber trennen, die sonst über optionale Felder vermischt würden.

Soll ich 2026 Enum oder Union Type nehmen?

Für feste Werte reicht meist eine Literal Union, denn sie erzeugt keinen Laufzeitcode. Brauchst du die Werte auch als Liste, passt ein Objekt oder Array mit as const. Enums bleiben sinnvoll, wenn bestehender Code schon damit arbeitet und ein Umbau wenig bringt.

Was ist 2026 der Unterschied zwischen Union und Intersection?

Eine Union heißt entweder das eine oder das andere. Eine Intersection mit dem Und Zeichen heißt beides zugleich. Bei Objekten vereint eine Intersection die Felder. Widersprechen sich zwei Typen, etwa string und number, ergibt die Intersection never.

Machen Union Types 2026 KI generierten Code sicherer?

Ja, weil sie die erlaubten Werte festlegen. Erfindet ein Agent einen Status, meldet der Compiler das sofort. Vergisst er einen Fall, greift der Exhaustive Check. Beides liefert ihm Feedback, das er selbst lesen und noch im selben Lauf beheben kann.

Warum kann ich nicht auf alle Felder einer Union zugreifen?

Der Compiler weiß vor einer Prüfung nicht, welcher Fall vorliegt. Ein Feld, das nur in einem Fall existiert, könnte also fehlen. Grenze den Typ erst ein, etwa über das Unterscheidungsfeld oder typeof. Danach ist der Zugriff erlaubt.

Wie viele Fälle darf eine Union haben?

Eine feste Grenze gibt es für den Alltag nicht. Entscheidend ist die Lesbarkeit. Wächst eine Union stark und wird an vielen Stellen behandelt, lohnt ein Blick auf die Struktur. Oft lassen sich Fälle gruppieren oder in einem Mapping statt in vielen switch Blöcken abbilden.

Was bedeutet string | undefined bei optionalen Feldern?

Ein optionales Feld kann fehlen, und beim Lesen hat es dann den Wert undefined. Im strict Mode zwingt dich der Compiler, das zu prüfen. Einzelne optionale Felder sind völlig in Ordnung. Heikel wird es, wenn mehrere davon voneinander abhängen.

Wie baue ich einen Boolean in eine Union um?

Suche nach Objekten mit Flags wie laedt oder istFehler. Definiere die echten Zustände als Union mit einem status Feld und ändere zuerst den Typ. Der Compiler zeigt dir danach alle betroffenen Stellen, die du Schritt für Schritt anpasst.

Prüfen Union Types auch API Antworten?

Nein, Typen existieren nur beim Kompilieren. Liefert eine API einen unbekannten Status, merkt der Compiler das nicht. An der Systemgrenze brauchst du deshalb eine Validierung zur Laufzeit. Dahinter arbeitet deine Anwendung mit der geprüften Union.