PricingLoginStart free
Frontend Academy · Lektion

Mapped types og conditional types

Byg mapped types for at transformere alle egenskaber i en type, og brug conditional types med infer til avanceret logik på typeniveau.

Lektion 3 af 413 trin

Mapped types og conditional types er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Afbildede typer — transformér hver egenskab

Afbildede typer gennemløber en types nøgler og transformerer dem. De danner grundlaget for hjælpetyperne Partial, Readonly og Record.

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

Omdøbning af nøgler med as

Brug as i afbildningsklausulen til at omdøbe nøglenavne. Kombinér det med skabelonliteraltyper for effektive transformationer.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

Filtrering af egenskaber med never

Returnér never fra en nøgleomdannelse for at fjerne egenskaben fra den resulterende type.

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

Betingede typer — if/else for typer

Betingede typer bruger mønsteret T extends U ? TrueType : FalseType. De evalueres på typeniveau, ikke under kørsel.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

Distributive betingede typer

Når T er en union, fordeler betingede typer sig over hvert medlem. string | number extends string ? ... kontrollerer hvert medlem separat: (string extends string ? ...) | (number extends string ? ...).

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

Brug af infer til at udtrække typer

infer R introducerer en typevariabel, som TypeScript udfylder. Det giver dig mulighed for at opfange dele af en typestruktur.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

Skabelonliteraltyper

Skabelonliteraltyper bruger den samme backtick-syntaks som skabelonliteraler, men på typeniveau, hvor de opretter unionstyper ud fra kombinationer af strengliteraler.

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

Kombination af afbildede og betingede typer

De mest effektive TypeScript-mønstre kombinerer begge dele. De indbyggede typer Required, Partial, Readonly og Record er alle afbildede typer.

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — rekursiv hjælpetype

Den indbyggede Partial går kun ét niveau ned. En DeepPartial går rekursivt ned i indlejrede objekter.

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

Praktisk anvendelse: API-svartyper

Mapped types og betingede typer gør det muligt at udlede stærke API-typer — f.eks. at udtrække kun de JSON-serialiserbare egenskaber fra et objekt.

Undgå overkomplicering

Kompleks typeakrobatik kan gøre kode svær at forstå. Spørg altid: Er et enklere typealias eller en grænseflade tydeligere? Typer bør dokumentere hensigten, ikke demonstrere TypeScript-ekspertise.

Hurtigt tjek

Hvilken værdi giver T extends U ? A : B, når T er en unionstype?

Besvar den i den interaktive lektion

Opsummering: mapped types og betingede typer

Mapped types gennemløber nøgler med [K in keyof T]. Brug as til at omdanne nøgler. Returnér never for at filtrere. Betingede typer: T extends U ? A : B. infer udtrækker typevariabler. Template literal types opbygger strengunioner. Kombinér begge dele for at lave stærke typeomdannelser som DeepPartial og Asyncify.

Gratis at komme i gang

Lær HTML 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
41
Lektioner
163
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Mapped types og conditional types” gratis?

Ja — hele teksten til “Mapped types og conditional types” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Mapped types og conditional types”?

Byg mapped types for at transformere alle egenskaber i en type, og brug conditional types med infer til avanceret logik på typeniveau. Du øver dig i Frontend 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å Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend 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 3 af 4.

Hvor lang tid tager lektionen “Mapped types og conditional types”?

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 Frontend Academy-lektion?

Ja. Alle Frontend 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. Generics: T extends og begrænsninger
  2. Utility types: Partial Required Pick Omit
  3. Mapped types og conditional types
  4. Narrowing: typeof instanceof og discriminated unions
← Tilbage til Frontend Academy