Union- und Intersection-Types in TypeScript
Union- und Intersection-Types
~15 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Kapitel 8 nutzte bereits BuchStatus = 'verfuegbar' | 'ausgeliehen' | 'reserviert' – Zeit, das |-Symbol (Union) und sein Gegenstück & (Intersection) im Detail zu verstehen.
Union Types: "entweder – oder"
type IdentifikationsNummer = string | number;
function findeBuchNachId(id: IdentifikationsNummer): void {
console.log(`Suche nach ID: ${id}`);
}
findeBuchNachId('978-3-608-93830-2'); // ✓ string
findeBuchNachId(42); // ✓ number
findeBuchNachId(true); // ✗ Fehler - boolean ist NICHT Teil der UnionEin Union Type mit | bedeutet: der Wert ist EINER der aufgeführten Typen – NICHT beide gleichzeitig. IdentifikationsNummer akzeptiert string ODER number, aber KEINEN dritten Typ.
Innerhalb einer Union: nur GEMEINSAME Eigenschaften nutzbar
type Suchergebnis = Buch | Autor;
function zeigeErgebnis(ergebnis: Suchergebnis): void {
console.log(ergebnis.name); // Fehler - 'name' existiert nicht auf 'Buch'
// TypeScript weiß NICHT, ob 'ergebnis' gerade ein Buch oder ein Autor ist,
// daher sind nur Eigenschaften erlaubt, die BEIDE Typen gemeinsam haben
}Achtung: Ein häufiger Anfängerfehler: innerhalb einer Funktion, die einen Union Type entgegennimmt, sind NUR die Eigenschaften direkt nutzbar, die ALLE beteiligten Typen GEMEINSAM haben. Um typspezifische Eigenschaften zu nutzen, brauchen Sie "Type Narrowing" (Kapitel 19) – dort lösen wir GENAU dieses Problem.
Intersection Types: "sowohl – als auch"
interface HatId {
id: string;
}
interface HatZeitstempel {
erstelltAm: Date;
}
type Entitaet = HatId & HatZeitstempel;
const beispiel: Entitaet = {
id: 'abc-123',
erstelltAm: new Date(),
}; // MUSS BEIDE Eigenschaften haben - id UND erstelltAm& (Intersection) bedeutet das GENAUE Gegenteil von |: der resultierende Typ hat ALLE Eigenschaften ALLER beteiligten Typen GLEICHZEITIG. Entitaet braucht sowohl id ALS AUCH erstelltAm.
Praxis: ein durchdachtes Suchergebnis modellieren
Unsere Bibliothek soll sowohl nach Büchern ALS AUCH nach Autoren suchen können – ein klassischer Fall für einen Union Type mit einem UNTERSCHEIDBAREN Feld ("Discriminated Union"):
import { Buch } from './Buch.js';
import { Autor } from './Autor.js';
export interface BuchTreffer {
typ: 'buch'; // Literal Type - IMMER genau dieser eine String-Wert
daten: Buch;
}
export interface AutorTreffer {
typ: 'autor';
daten: Autor;
}
export type Suchergebnis = BuchTreffer | AutorTreffer;function formatiereTreffer(treffer: Suchergebnis): string {
if (treffer.typ === 'buch') {
// TypeScript weiß HIER: treffer ist ein BuchTreffer, treffer.daten ist ein Buch
return `Buch: ${treffer.daten.titel}`;
}
// TypeScript weiß HIER: treffer MUSS ein AutorTreffer sein (Ausschlussverfahren)
return `Autor: ${treffer.daten.name}`;
}Das gemeinsame typ-Feld mit UNTERSCHIEDLICHEN Literal-Werten ('buch' vs. 'autor') ist der Schlüssel zu einer "Discriminated Union" – die if (treffer.typ === 'buch')-Prüfung ENGT den Typ automatisch ein ("narrowing", ausführlich Kapitel 19), OHNE dass wir das selbst explizit machen müssten. Dieses Muster ist eine der nützlichsten und am häufigsten verwendeten TypeScript-Techniken überhaupt.
Tipp: Faustregel: sobald ein Wert "das eine ODER das andere" sein kann UND Sie später wissen müssen, WELCHES der beiden es ist, fügen Sie ein gemeinsames "Diskriminator"-Feld (typ, kind, type) mit je einem EINDEUTIGEN Literal-Wert hinzu – das macht spätere if/switch-Prüfungen sowohl lesbarer als auch typsicherer.