PricingLoginStart free
TypeScript Academy · Lektion

Praktiske mønstre med unionstyper og snit-mængdetyper

Anvend unionstyper og snit-mængdetyper i virkelige situationer

Lektion 4 af 413 trin

Praktiske mønstre med unionstyper og snit-mængdetyper er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Velkommen

Union- og intersectiontyper driver mange realistiske TypeScript-mønstre. Denne lektion gennemgår praktiske kombinationer, som du vil bruge i produktionskode.

Mønster for valgfri nyttedata

Modellér funktioner eller hændelser, der måske indeholder data, med en union.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Builder-/mixin-mønsteret med intersectioner

Brug intersectioner til at sammensætte funktionssæt til en samlet type.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Union til normalisering af inddata

Acceptér fleksible inddatatyper i en funktion, og normalisér dem til en kanonisk type.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Brandede typer med intersectioner

Opret særskilte typer fra den samme primitive type ved hjælp af intersectioner med en unik brandmarkør.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

WithOptional-mønsteret

Brug en intersection med Partial til at oprette en basistype, hvor nogle felter er påkrævede, og andre er valgfrie.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Polymorfe komponentegenskaber

I React kan uniontyper lade komponentegenskaber variere baseret på en diskriminant.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Udvidelse af tredjepartstyper

Kombinér tredjepartstyper med dine egne tilføjelser ved hjælp af en intersection.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Kombination af unioner og intersectioner

Unioner og intersectioner kan kombineres. Parenteser styrer rækkefølgen.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Typevagter for unionmedlemmer

Skriv en genanvendelig typevagtfunktion for at indsnævre en union uden at gentage kontroller.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Distributiv adfærd i intersectioner

Distributiv regel: A & (B | C) = (A & B) | (A & C). TypeScript anvender automatisk denne regel.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

Hurtigt tjek

Hvilket mønster opretter en særskilt type fra `number` for at forhindre utilsigtet blanding af identifikatorer?
Besvar den i den interaktive lektion

Opsummering

Union- og intersectiontyper kombineres for at modellere komplekse strukturer fra den virkelige verden: brandede id'er, mixinadfærd, fleksible inddata og diskriminerede komponentegenskaber. Behersk disse mønstre for at skrive TypeScript i produktionskvalitet.
Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
101
Lektioner
352
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Praktiske mønstre med unionstyper og snit-mængdetyper” gratis?

Ja — hele teksten til “Praktiske mønstre med unionstyper og snit-mængdetyper” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Praktiske mønstre med unionstyper og snit-mængdetyper”?

Anvend unionstyper og snit-mængdetyper i virkelige situationer Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Praktiske mønstre med unionstyper og snit-mængdetyper”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Unionstyper: A eller B
  2. Snitmængdetyper: A og B
  3. Discriminated unions til sikker pattern matching
  4. Praktiske mønstre med unionstyper og snit-mængdetyper
← Tilbage til TypeScript Academy