TypeScript Academy · Lektion

TupleToUnion och UnionToIntersection

Konvertera programmatiskt mellan tupler och unioner

Lektion 3 av 413 steg

TupleToUnion och UnionToIntersection är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

TupleToUnion: konceptet

TupleToUnion konverterar en tupeltyp till en union av dess elementtyper – motsatsen till att bygga en tupel av enskilda typer.

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

Så fungerar T[number]

Indexering av en tupel med number ger åtkomst till alla numeriska index samtidigt, vilket TypeScript uttrycker som en union av elementtyperna.

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

TupleToUnion med as const

Kombinera med arrayer av as const för att härleda unioner från värdearrayer.

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

UnionToIntersection: konceptet

Att konvertera en union till en intersektion är svårare och kräver distribuerande villkorstyper med funktionstyper för att samla alla medlemmar.

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

Varför fungerar funktionsknepet?

Att distribuera över unionsmedlemmar omsluter var och en i en funktionstyp. TypeScript härleder sedan intersektionen av alla parametertyper för att uppfylla den strukturella begränsningen.

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

UnionToTuple: ett svårt problem

Att konvertera en union till en tupel är teoretiskt möjligt, men bygger på evalueringsordningen (som TypeScript inte garanterar) – undvik detta i produktionskod.

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

Praktisk användning av TupleToUnion

Extrahera alla giltiga nycklar från en tupel av strängliteraler för att bygga en unionstyp för validering.

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

Praktisk användning av UnionToIntersection

Slå ihop flera mixin-gränssnitt från en union till en enda kombinerad typ.

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

Intersektion av primitiva typer

Att skapa en intersektion av orelaterade primitiva typer ger never, eftersom inget värde kan vara både string och number.

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

Använda dessa i generiska begränsningar

Kombinera TupleToUnion och UnionToIntersection i generiska begränsningar för att bygga flexibla, typsäkra API:er.

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

Sammanfattning: tupel ↔ union ↔ intersektion

TupleToUnion använder indexering med T[number]. UnionToIntersection använder tricket med distribuerande funktioner och infer. Båda är viktiga verktyg för avancerad typmanipulering.

Snabbkontroll

Vad är TupleToUnion<[string, number]>?

Besvara frågan i den interaktiva lektionen

Det här har Ni lärt Er

TupleToUnion använder numerisk indexering för att extrahera elementunioner från tupler. UnionToIntersection använder tricket med distribuerande funktioner. Detta är grundläggande mönster för avancerad typmanipulering i TypeScript.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”TupleToUnion och UnionToIntersection” gratis?

Ja – hela texten till ”TupleToUnion och UnionToIntersection” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”TupleToUnion och UnionToIntersection”?

Konvertera programmatiskt mellan tupler och unioner Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”TupleToUnion och UnionToIntersection”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy