TypeScript Academy · Lektion

Kombinera literaler till unioner

Skapa ändliga mängder av värden genom att förena literaltyper.

Lektion 4 av 413 steg

Kombinera literaler till unioner är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 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.

Unioner av literaltyper

En literalunion beskriver ett värde som måste vara exakt ett av flera kända alternativ. Den är grundläggande för tillståndsmaskiner, enum-typer och korrekt typade API:er.

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

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

Använda switch med en literalunion

En switch över en literalunion är lättläst, och kompilatorn vet att varje fall är ett av de tillåtna värdena. Det passar perfekt ihop med kontroller av fullständighet.

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'));

Fullständig hantering

Att hantera varje medlem i en union kallas fullständig hantering. När ni täcker alla fall kan TypeScript bevisa att funktionen alltid returnerar, utan någon saknad gren.

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'));

never-tricket för fullständighet

Om ni tilldelar värdet till never i standardgrenen tvingas kompilatorn att rapportera ett fel om ni lägger till en ny unionsmedlem men glömmer att hantera den. Det fungerar som ett skyddsnät för kod som utvecklas.

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'));

Härleda unioner från const-objekt

Ett vanligt mönster är att lagra värden i ett const-objekt och härleda unionen från dess värden med hjälp av typeof obj[keyof typeof obj]. En enda sanningskälla, två resultat.

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);

Härleda unioner från nycklar

Ni kan också härleda en union av nycklarna med keyof typeof obj. Det är användbart när nycklarna själva är de meningsbärande identifierarna.

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]);

Diskriminerade unioner med literal-taggar

Fäst en literal-egenskap som tagg på varje objektvariant, så kan TypeScript skilja dem åt. När ni kontrollerar taggen begränsas typen till exakt rätt form.

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 }));

Typförfining med diskriminanten

När ni väl har testat den literala diskriminanten vet kompilatorn vilken variant ni har, så dess unika fält blir säkert åtkomliga utan typkonverteringar.

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' }));

Kombinera flera unioner

Ni kan sätta samman större unioner från mindre namngivna unioner. På så sätt hålls relaterade alternativ grupperade och återanvändbara i hela kodbasen.

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

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

Unioner som funktionsbegränsningar

Om ni skickar en literalunion till en funktion begränsas anropare till giltiga alternativ, samtidigt som editorn ger automatisk komplettering. Kombinationen av säkerhet och upptäckbarhet är svårslagen.

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

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

Varför literalunioner är bättre än strängar

En vanlig string-parameter accepterar vilket värde som helst, även stavfel. En literalunion upptäcker misstag vid kompilering och dokumenterar de giltiga alternativen — en tydlig förbättring för kod som ska vara lätt att underhålla.

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

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

Snabbtest

Testa er förståelse av literalunioner.

Besvara frågan i den interaktiva lektionen

Sammanfattning: kombinera literaler

Ni har lärt er att:

Bygga literalunioner för ändliga mängder av alternativ.
Hantera dem fullständigt och använda never-tricket som skydd.
Härleda unioner från const-objekt via keyof typeof och typeof obj[keyof typeof obj].
Särskilja varianter med literala tagegenskaper.

Nästa kurs: specialtyperna unknown, never och void.

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

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 ”Kombinera literaler till unioner” gratis?

Ja – hela texten till ”Kombinera literaler till unioner” 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 ”Kombinera literaler till unioner”?

Skapa ändliga mängder av värden genom att förena literaltyper. 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 4 av 4.

Hur lång tid tar lektionen ”Kombinera literaler till unioner”?

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