TypeScript Academy · leksjon

Diskriminerte unioner for trygg mønstergjenkjenning

Legg til et felles litteralfelt i unionsmedlemmer for typesikkerhet.

Leksjon 3 av 413 trinn

Diskriminerte unioner for trygg mønstergjenkjenning er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Velkommen

Diskriminerte unioner legger til en felles literal-egenskap i unionmedlemmene. TypeScript bruker denne diskriminanten til å snevre inn typen i switch- og if-setninger.

Diskriminantegenskapen

En diskriminant er en egenskap med en unik literaltype i hvert unionmedlem. TypeScript snevrer inn unionen basert på verdien.
type Circle = { kind: 'circle'; radius: number };
type Square = { kind: 'square'; side: number };
type Shape = Circle | Square;

Innsnevring med if-kontroller

Kontroller diskriminanten i en if-setning. TypeScript snevrer inn typen til det samsvarende medlemmet.
function area(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  }
  return shape.side ** 2; // narrowed to Square
}

Innsnevring med switch/case

switch-setninger fungerer utmerket med diskriminerte unioner. Hver case snevrer inn typen til et bestemt medlem.
function describe(shape: Shape): string {
  switch (shape.kind) {
    case 'circle': return `Circle r=${shape.radius}`;
    case 'square': return `Square s=${shape.side}`;
  }
}

Fullstendighet med never

Legg til en default-case som tilordner verdien til `never`. Hvis De legger til et nytt unionmedlem og glemmer å håndtere det, rapporterer TypeScript en feil.
function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
    default:
      const _exhaustive: never = shape;
      throw new Error('Unhandled shape');
  }
}

Result-type-mønsteret

Diskriminerte unioner passer perfekt til Result-mønsteret – å returnere enten suksessdata eller en feil uten å utløse et unntak.
type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type Result<T> = Ok<T> | Err;

Action-type-mønsteret (Redux-stil)

I Redux og lignende systemer er actions diskriminerte unioner. `type`-feltet er diskriminanten.
type Action =
  | { type: 'INCREMENT'; amount: number }
  | { type: 'DECREMENT'; amount: number }
  | { type: 'RESET' };

Flere diskriminantegenskaper

En diskriminant trenger ikke å være én enkelt egenskap – TypeScript kan snevre inn typen basert på en hvilken som helst kombinasjon av kontroller.
type AdminUser = { role: 'admin'; permissions: string[] };
type RegularUser = { role: 'user'; credits: number };
type User = AdminUser | RegularUser;

Unioner uten diskriminant kan fortsatt snevres inn

Selv uten en diskriminant snevrer TypeScript inn unioner ved hjelp av typeof, instanceof og egenskapskontroller.
type StringOrArr = string | string[];
function flatten(val: StringOrArr): string[] {
  return Array.isArray(val) ? val : [val];
}

Diskriminerte unioner kontra klassehierarkier

Diskriminerte unioner er et funksjonelt alternativ til klassearv for modellering av varianter. De er enklere, kan serialiseres og fungerer godt med pattern matching.

Praktisk eksempel: HTTP-svar som union

Modeller ulike API-svartilstander som en diskriminert union.
type ApiState<T> =
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

Kjapp kontroll

Hva må hvert medlem av en diskriminert union ha for at TypeScript skal snevre inn typen riktig?

Oppsummering

Diskriminerte unioner bruker en felles literal-egenskap som diskriminant. Snevr inn typen med switch/case, og legg til en never-kontroll for fullstendighet for å oppdage ubehandlede tilfeller. De egner seg spesielt godt for tilstandsmaskiner, actions og API-svar.
Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
101
Leksjoner
352

Ofte stilte spørsmål

Er leksjonen «Diskriminerte unioner for trygg mønstergjenkjenning» gratis?

Ja – hele teksten i «Diskriminerte unioner for trygg mønstergjenkjenning» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Diskriminerte unioner for trygg mønstergjenkjenning»?

Legg til et felles litteralfelt i unionsmedlemmer for typesikkerhet. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Diskriminerte unioner for trygg mønstergjenkjenning»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Union-typer: A eller B
  2. Snitt-typer: A og B
  3. Diskriminerte unioner for trygg mønstergjenkjenning
  4. Praktiske mønstre med unioner og snitt
← Tilbake til TypeScript Academy