Frontend Academy · leksjon

Mapped types og conditional types

Bygg mapped types for å transformere alle egenskapene i en type, og bruk conditional types med infer for avansert logikk på typenivå.

Leksjon 3 av 413 trinn

Mapped types og conditional types er en gratis leksjon i Frontend 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 Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Mapped types – transformer hver egenskap

Mapped types itererer over nøklene i en type og transformerer dem. De danner grunnlaget for utility types som 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];
};

Tilordne nøkler på nytt med as

Bruk as i mapping-klausulen for å tilordne nøkkelnavn på nytt. Kombiner dette med template literal types for kraftige transformasjoner.

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 }

Filtrere egenskaper med never

Returner never fra en mapping av nøkler for å fjerne egenskapen fra den resulterende typen.

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

Conditional types – if/else for typer

Conditional types bruker mønsteret T extends U ? TrueType : FalseType. De evalueres på typenivå, ikke under kjøring.

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

Distribuerende conditional types

Når T er en union, distribueres conditional types 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)[])

Bruke infer til å trekke ut typer

infer R introduserer en typevariabel som TypeScript fyller ut. Det lar deg hente ut deler av en typestruktur.

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

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

Template literal types

Template literal types bruker den samme backtick-syntaksen som template literals, men på typenivå, og oppretter union-typer fra kombinasjoner av 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'

Kombinere mapped og conditional types

De kraftigste TypeScript-mønstrene kombinerer begge deler. De innebygde typene required, partial, readonly og record er alle mapped types.

// 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 nytte-type

Den innebygde Partial går bare ett nivå dypt. En DeepPartial rekurrerer gjennom nestede objekter.

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

Praktisk bruk: API-svarstyper

Mapped types og conditional types muliggjør kraftige utledninger av API-typer – for eksempel å trekke ut bare de JSON-serialiserbare egenskapene i et objekt.

Unngå overengineering

Kompliserte typekonstruksjoner kan gjøre kode vanskelig å forstå. Spør alltid: Er et enklere typealias eller interface tydeligere? Typer bør dokumentere hensikten, ikke demonstrere hvor godt du behersker TypeScript.

Kort oppgave

Hva evalueres T extends U ? A : B til når T er en unionstype?

Besvar den i den interaktive leksjonen

Oppsummering: Mapped Types og Conditional Types

Mapped types går gjennom nøkler med [K in keyof T]. Bruk as til å endre nøklene. Returner never for å filtrere. Conditional types: T extends U ? A : B. infer trekker ut typevariabler. Template literal types bygger string-unioner. Kombiner begge for kraftige typetransformasjoner som DeepPartial og Asyncify.

Gratis å komme i gang

Lær deg HTML 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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mapped types og conditional types» gratis?

Ja – hele teksten i «Mapped types og conditional types» 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 Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mapped types og conditional types»?

Bygg mapped types for å transformere alle egenskapene i en type, og bruk conditional types med infer for avansert logikk på typenivå. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 «Mapped types og conditional types»?

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

Ja. Alle Frontend 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

Generics: T extends og begrensninger
Utility types: Partial, Required, Pick og Omit
Mapped types og conditional types
Narrowing: typeof, instanceof og diskriminerte unioner

← Tilbake til Frontend Academy