TypeScript Academy · Lektion

Literale zu Unions kombinieren

Erstellen Sie endliche Wertemengen, indem Sie Literaltypen zu Unions verbinden.

Lektion 4 von 413 Schritte

Literale zu Unions kombinieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Unions aus Literaltypen

Eine Union aus Literalen modelliert einen Wert, der exakt eine von mehreren bekannten Optionen sein muss. Sie bildet die Grundlage für Zustandsautomaten, Enums und typsichere APIs.

type Status = 'idle' | 'loading' | 'success' | 'error';

let state: Status = 'idle';
state = 'loading';
console.log('State:', state);

Über eine Literal-Union verzweigen

Ein switch über eine Literal-Union ist übersichtlich, und der Compiler weiß, dass jeder Fall einer der erlaubten Werte ist. Das passt perfekt zu Vollständigkeitsprüfungen.

type Status = 'idle' | 'loading' | 'done';

function label(s: Status): string {
  switch (s) {
    case 'idle': return 'Waiting';
    case 'loading': return 'Working';
    case 'done': return 'Finished';
  }
}
console.log(label('loading'));

Vollständige Verarbeitung

Jedes Mitglied einer Union zu verarbeiten, nennt man vollständige Verarbeitung. Wenn Sie alle Fälle abdecken, kann TypeScript beweisen, dass die Funktion immer einen Rückgabewert liefert und kein Zweig fehlt.

type Dir = 'left' | 'right';

function step(d: Dir): number {
  if (d === 'left') return -1;
  return 1; // only 'right' remains
}
console.log(step('left'), step('right'));

Der never-Trick für Vollständigkeitsprüfungen

Wenn Sie den Wert im Standardzweig einer never-Variablen zuweisen, erzwingt dies einen Kompilierungsfehler, sobald Sie ein neues Union-Mitglied hinzufügen, aber dessen Verarbeitung vergessen. Das ist ein Sicherheitsnetz für sich weiterentwickelnden Code.

type Shape = 'circle' | 'square';

function area(s: Shape): string {
  switch (s) {
    case 'circle': return 'pi r^2';
    case 'square': return 'a^2';
    default:
      const _exhaustive: never = s;
      return _exhaustive;
  }
}
console.log(area('circle'));

Unions aus const-Objekten ableiten

Ein gängiges Muster besteht darin, Werte in einem const-Objekt zu speichern und mit typeof obj[keyof typeof obj] die Union aus seinen Werten abzuleiten. Eine einzige Quelle, zwei Ergebnisse.

const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);

Unions aus Schlüsseln ableiten

Sie können mit keyof typeof obj auch eine Union der Schlüssel ableiten. Das ist nützlich, wenn die Schlüssel selbst die aussagekräftigen Bezeichner sind.

const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);

Diskriminierte Unions mit Literal-Tags

Fügen Sie jeder Objektvariante eine Literal-Eigenschaft als tag hinzu, kann TypeScript zwischen ihnen unterscheiden. Durch die Prüfung des Tags wird der Typ auf die exakte Struktur eingegrenzt.

type Action =
  | { type: 'add'; amount: number }
  | { type: 'reset' };

function reduce(a: Action): number {
  if (a.type === 'add') return a.amount;
  return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));

Eingrenzen anhand des Diskriminators

Sobald Sie den Literal-Diskriminator testen, weiß der Compiler, welche Variante vorliegt. Dadurch können Sie auf ihre eindeutigen Felder sicher und ohne Casts zugreifen.

type Event =
  | { kind: 'click'; x: number; y: number }
  | { kind: 'key'; code: string };

function handle(e: Event): string {
  if (e.kind === 'key') return 'Key ' + e.code;
  return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));

Mehrere Unions kombinieren

Sie können größere Unions aus kleineren benannten Unions zusammensetzen. So bleiben zusammengehörige Optionen gruppiert und in Ihrer Codebasis wiederverwendbar.

type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;

const c: Color = 'green';
console.log(c);

Unions als Funktionseinschränkungen

Wenn Sie einer Funktion eine Literal-Union übergeben, werden Aufrufer auf gültige Optionen beschränkt und erhalten eine Autovervollständigung im Editor. Die Kombination aus Sicherheit und Auffindbarkeit ist kaum zu übertreffen.

type Align = 'left' | 'center' | 'right';

function setAlign(a: Align): void {
  console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // Error

Warum Literal-Unions Strings überlegen sind

Ein einfacher string-Parameter akzeptiert jeden Wert, auch Tippfehler. Eine Literal-Union erkennt Fehler bereits zur Kompilierungszeit und dokumentiert die gültigen Optionen – eine klare Verbesserung für wartbaren Code.

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';

function request(m: Method, url: string): void {
  console.log(m, url);
}
request('POST', '/api/users');

Kurzer Test

Testen Sie Ihr Verständnis von Literal-Unions.

Beantworte es in der interaktiven Lektion

Zusammenfassung: Literale kombinieren

Sie haben gelernt:

Unions aus Literalen für endliche Optionsmengen zu erstellen.
Sie vollständig zu verarbeiten und dabei den never-Trick als Sicherheitsmaßnahme zu verwenden.
Unions aus const-Objekten mit keyof typeof und typeof obj[keyof typeof obj] abzuleiten.
Varianten anhand von Literal-Tag-Eigenschaften zu unterscheiden.

Nächster Kurs: die speziellen Typen unknown, never und void.

const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);

Kostenlos starten

Lerne TypeScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 101
Lektionen: 352

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Literale zu Unions kombinieren“ kostenlos?

Ja — der vollständige Text von „Literale zu Unions kombinieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Literale zu Unions kombinieren“?

Erstellen Sie endliche Wertemengen, indem Sie Literaltypen zu Unions verbinden. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Literale zu Unions kombinieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy