TypeScript Academy · Oppitunti

Flatten- ja UnwrapPromise-utilityt

Kirjoittakaa tyyppejä, jotka avaavat sisäkkäisiä geneerisiä rakenteita

Oppitunti 2/413 vaihetta

Flatten- ja UnwrapPromise-utilityt on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Flatten-ongelma

JavaScript-taulukot voivat olla sisäkkäisiä. Flatten-utility-tyyppi poistaa taulukon ympäriltä rekursiivisesti tyyppikääreet ja palauttaa sisimmän alkiotyypin.

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

Rekursiivisuuden puuttuminen: yksi taso

Yhden tason flatten vastaa Array.prototype.flat(1)-metodia: se purkaa täsmälleen yhden sisäkkäisyystason.

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

Rekursiivinen Flatten

Rekursiivinen versio jäljittelee Array.prototype.flat(Infinity)-metodia etenemällä rekursiivisesti, kunnes taulukon ympärillä ei ole enää kääreitä.

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

UnwrapPromise: yksi taso

Purkaa yhden Promise-kerroksen infer-avainsanan avulla.

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

Syvä UnwrapPromise

Purkaa sisäkkäiset promiset rekursiivisesti. Tämä vastaa sisäänrakennettua Awaited-tyyppiä.

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

Flattenin ja UnwrapPromisen yhdistäminen

Yhdistetty tyyppi käsittelee sekä promiseja että taulukoita, joten se sopii taulukoita palauttaville asynkronisille funktioille.

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

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

Sisäänrakennettu Awaited<T>

TypeScript 4.5+:ssa on mukana Awaited, joka purkaa thenable-tyypit rekursiivisesti, myös muut kuin Promise-thenablet.

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

Map-arvojen purkaminen

Saman infer-kuvion avulla voidaan poimia arvotyypit Map-tyypistä.

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

FlattenObject: sisäkkäisten rajapintojen yhdistäminen

Tyyppitasolla toimiva objektin flatten yhdistää sisäkkäiset objektityypit. Se on monimutkaisempi, mutta hyödyllinen syvien konfiguraatioiden yhdistämisessä.

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

Käytännön käyttö: API-vastausten purkaminen

Purkaa sisäkkäiset API-vastausten kääreet, jotta datatyyppi voidaan saada ilman manuaalisia tyyppiväitteitä.

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

Kertaus: Flatten ja Unwrap

Flatten ja UnwrapPromise käyttävät rekursiivisia ehdollisia tyyppejä ja infer-avainsanaa tyyppikääreiden purkamiseen. Käyttäkää promisejen purkamiseen Awaited-tyyppiä ja toteuttakaa muiden rakenteiden käsittelyä varten oma rekursio.

Pikatarkistus

Mitä Flatten palauttaa?

Vastaa interaktiivisessa oppitunnissa

Mitä opitte

Flatten ja UnwrapPromise ovat rekursiivisia ehdollisia tyyppejä, jotka kuorivat geneeriset kääreet pois. Yhdistämällä ne voitte yksinkertaistaa monimutkaisia sisäkkäisiä tyyppejä ja käyttää promise-ketjuihin sisäänrakennettua Awaited-tyyppiä.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Flatten- ja UnwrapPromise-utilityt” ilmainen?

Kyllä – oppitunnin ”Flatten- ja UnwrapPromise-utilityt” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Flatten- ja UnwrapPromise-utilityt”?

Kirjoittakaa tyyppejä, jotka avaavat sisäkkäisiä geneerisiä rakenteita Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Flatten- ja UnwrapPromise-utilityt”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: TypeScript Academy