0Pricing
TypeScript Academy · Lektion

TupleToUnion und UnionToIntersection

Konvertieren Sie programmatisch zwischen Tupeln und Unions.

TupleToUnion und UnionToIntersection ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

TupleToUnion: Das Konzept

TupleToUnion wandelt einen Tupeltyp in eine Union seiner Elementtypen um – das Gegenteil davon, aus einzelnen Typen ein Tupel zu erstellen.

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

So funktioniert T[number]

Durch die Indizierung eines Tupels mit number greifen Sie gleichzeitig auf alle numerischen Indizes zu. TypeScript stellt dies als Union der Elementtypen dar.

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

TupleToUnion mit as const

Kombinieren Sie dies mit as const-Arrays, um aus Wertarrays Unions abzuleiten.

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection: Das Konzept

Die Umwandlung einer Union in eine Intersection ist schwieriger und erfordert distributive bedingte Typen mit Funktionstypen, um alle Mitglieder zusammenzuführen.

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

Warum der Funktionstrick funktioniert

Durch die Verteilung über die Union-Mitglieder wird jedes Mitglied in einen Funktionstyp eingeschlossen. TypeScript leitet anschließend die Intersection aller Parametertypen ab, um die strukturelle Einschränkung zu erfüllen.

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple: Ein schwieriges Problem

Die Umwandlung einer Union in ein Tupel ist theoretisch möglich, beruht jedoch auf der Auswertungsreihenfolge, die TypeScript nicht garantiert – vermeiden Sie dies in Produktionscode.

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

Praktischer Einsatz von TupleToUnion

Extrahieren Sie alle gültigen Schlüssel aus einem Tupel von Zeichenfolgenliteralen, um einen Union-Typ für die Validierung zu erstellen.

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

Praktischer Einsatz von UnionToIntersection

Führen Sie mehrere Mixin-Interfaces aus einer Union zu einem einzigen kombinierten Typ zusammen.

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

Intersection primitiver Typen

Die Intersection nicht verwandter primitiver Typen ergibt never, da kein Wert gleichzeitig string und number sein kann.

type X = UnionToIntersection<string | number>; // never

Diese Typen in generischen Einschränkungen verwenden

Kombinieren Sie TupleToUnion und UnionToIntersection innerhalb generischer Einschränkungen, um flexible, typsichere APIs zu erstellen.

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

Zusammenfassung: Tupel ↔ Union ↔ Intersection

TupleToUnion verwendet die Indizierung mit T[number]. UnionToIntersection verwendet den Funktionstrick zur Verteilung mit infer. Beide sind unverzichtbare Werkzeuge für die fortgeschrittene Typmanipulation.

Schnelltest

Was ist TupleToUnion<[string, number]>?

Das haben Sie gelernt

TupleToUnion verwendet die numerische Indizierung, um Element-Unions aus Tupeln zu extrahieren. UnionToIntersection verwendet den Funktionstrick zur Verteilung. Dies sind grundlegende Muster für die fortgeschrittene Typmanipulation in TypeScript.

Häufig gestellte Fragen

Ist die Lektion „TupleToUnion und UnionToIntersection“ kostenlos?

Ja — der vollständige Text von „TupleToUnion und UnionToIntersection“ 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 „TupleToUnion und UnionToIntersection“?

Konvertieren Sie programmatisch zwischen Tupeln und Unions. 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 3 von 4.

Wie lange dauert die Lektion „TupleToUnion und UnionToIntersection“?

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

  1. DeepPartial und DeepReadonly
  2. Flatten- und UnwrapPromise-Utilities
  3. TupleToUnion und UnionToIntersection
  4. Eine Type-Utility-Bibliothek veröffentlichen
← Zurück zu TypeScript Academy