TypeScript Academy · leksjon

Flatten- og UnwrapPromise-verktøy

Skriv typer som pakker ut nestede generiske strukturer.

Leksjon 2 av 413 trinn

Flatten- og UnwrapPromise-verktøy er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 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.

Flattingsproblemet

JavaScript-matriser kan være nestet. En hjelpeverktøytype som Flatten fjerner rekursivt matriseinnpakninger fra en type og returnerer typen til det innerste elementet.

type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type A = Flatten<number[][][]>; // number
type B = Flatten<string[]>;     // string

Ikke-rekursiv flattening (ett nivå)

Flattening på ett nivå tilsvarer Array.prototype.flat(1) – den pakker ut nøyaktig ett nestingsnivå.

type FlatOnce<T> = T extends (infer U)[] ? U : T;
type A = FlatOnce<number[][]>; // number[]
type B = FlatOnce<string[]>;   // string

Rekursiv flattening

Den rekursive versjonen etterligner Array.prototype.flat(Infinity) ved å rekursere til det ikke finnes flere matriseinnpakninger.

type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // boolean

UnwrapPromise: Ett nivå

Pakk ut ett enkelt Promise-lag ved hjelp av infer.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>;          // number

Dyp UnwrapPromise

Pakk ut nestede løfter rekursivt – tilsvarende den innebygde Awaited.

type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // number

Kombinere Flatten og UnwrapPromise

En kombinert type håndterer både løfter og matriser, noe som er nyttig for asynkrone funksjoner som returnerer matriser.

type Simplify<T> =
  T extends Promise<infer U> ? Simplify<U>
  : T extends (infer V)[] ? Simplify<V>
  : T;

type G = Simplify<Promise<string[][]>>; // string

Innebygd Awaited<T>

TypeScript 4.5+ leveres med Awaited, som pakker ut thenable-typer rekursivt, inkludert thenable-typer som ikke er Promise.

type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()

Pakke ut Map-verdier

Det samme infer-mønsteret trekker ut verdityper fra Map.

type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]

FlattenObject: Slå sammen nestede grensesnitt

En objekttype som flater ut på typenivå, slår sammen nestede objekttyper – mer komplekst, men nyttig for dyp sammenslåing av konfigurasjoner.

// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base pattern

Praktisk bruk: Pakke ut API-svar

Pakk ut nestede API-svarinnpakninger for å få datatypen uten manuelle typepåstander.

type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]

Oppsummering: Flatten og Unwrap

Flatten og UnwrapPromise bruker rekursive betingede typer med infer for å fjerne typeinnpakninger. Bruk Awaited til å pakke ut løfter, og skriv egen rekursjon for andre strukturer.

Rask kontroll

Hva returnerer Flatten?

Besvar den i den interaktive leksjonen

Dette har De lært

Flatten og UnwrapPromise er rekursive betingede typer som fjerner generiske innpakninger. Kombiner dem for å forenkle komplekse nestede typer, og bruk den innebygde Awaited for løftekjeder.

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Flatten- og UnwrapPromise-verktøy» gratis?

Ja – hele teksten i «Flatten- og UnwrapPromise-verktøy» 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 «Flatten- og UnwrapPromise-verktøy»?

Skriv typer som pakker ut nestede generiske strukturer. 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 2 av 4.

Hvor lang tid tar leksjonen «Flatten- og UnwrapPromise-verktøy»?

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

← Tilbake til TypeScript Academy