PricingLoginStart free
TypeScript Academy · Lektion

Praktiska mönster med unioner och snitt

Tillämpa unioner och snitt i verkliga scenarier

Lektion 4 av 413 steg

Praktiska mönster med unioner och snitt ä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.

Välkommen

Union- och intersektionstyper ligger till grund för många praktiska TypeScript-mönster. I den här lektionen utforskar ni praktiska kombinationer som ni kommer att använda i produktionskod.

Mönstret med valfri nyttolast

Modellera funktioner eller händelser som kanske innehåller data och kanske inte gör det med en union.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Builder-/Mixin-mönster med intersektion

Använd intersektioner för att komponera funktionsuppsättningar till en kombinerad typ.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Unioner för normalisering av indata

Acceptera flexibla indatatyper i en funktion och normalisera dem till en kanonisk typ.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Branded types med intersektioner

Skapa distinkta typer från samma primitiva typ genom att använda intersektioner med en unik brandmarkör.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

WithOptional-mönstret

Använd en intersektion med Partial för att skapa en bastyp där vissa fält krävs och andra är valfria.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Props för polymorfa komponenter

I React gör uniontyper att komponentprops kan variera beroende på en diskriminator.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Utöka tredjepartstyper

Intersektera tredjepartstyper med era egna tillägg.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Kombinera unioner och intersektioner

Unioner och intersektioner kan kombineras. Parenteser styr prioriteten.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Type guards för unionens medlemmar

Skriv en återanvändbar type guard-funktion för att förfina en union utan att upprepa kontroller.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Distributivt beteende i intersektioner

Distributivitetslagen: A & (B | C) = (A & B) | (A & C). TypeScript tillämpar detta automatiskt.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

Snabbkontroll

Vilket mönster skapar en distinkt typ från `number` för att förhindra att ID:n blandas ihop av misstag?
Besvara frågan i den interaktiva lektionen

Sammanfattning

Union- och intersektionstyper kan kombineras för att modellera komplexa strukturer från verkligheten: brandade ID:n, mixin-beteenden, flexibla indata och diskriminerade komponentprops. Bemästra dessa mönster för TypeScript-kod av produktionskvalitet.
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 gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Praktiska mönster med unioner och snitt” gratis?

Ja – hela texten till ”Praktiska mönster med unioner och snitt” 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 ”Praktiska mönster med unioner och snitt”?

Tillämpa unioner och snitt i verkliga scenarier 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 ”Praktiska mönster med unioner och snitt”?

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

  1. Unionstyper: A eller B
  2. Snitt-typer: A och B
  3. Diskriminerade unioner för säker mönstermatchning
  4. Praktiska mönster med unioner och snitt
← Tillbaka till TypeScript Academy