TypeScript Academy · Lezione

Utility Flatten e UnwrapPromise

Scriva tipi che rimuovano i wrapper dalle strutture generiche annidate.

Lezione 2 di 413 passaggi

Utility Flatten e UnwrapPromise è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Il problema di Flatten

Gli array JavaScript possono essere annidati. Un utility type Flatten rimuove ricorsivamente i wrapper array da un tipo, restituendo il tipo dell'elemento più interno.

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

Flatten non ricorsivo (un livello)

Un flatten a un solo livello riproduce il comportamento di Array.prototype.flat(1): rimuove esattamente un livello di annidamento.

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

Flatten ricorsivo

La versione ricorsiva riproduce il comportamento di Array.prototype.flat(Infinity) ricorrendo finché non rimangono più wrapper array.

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

UnwrapPromise: un livello

Rimuova un singolo livello di Promise utilizzando infer.

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

UnwrapPromise profondo

Rimuova ricorsivamente i promise annidati, in modo equivalente al tipo integrato Awaited.

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

Combinazione di Flatten e UnwrapPromise

Un tipo combinato gestisce sia i promise sia gli array ed è utile per le funzioni asincrone che restituiscono array.

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

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

Awaited<T> integrato

TypeScript 4.5+ include Awaited, che rimuove ricorsivamente i tipi thenable, inclusi quelli non basati su Promise.

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

Rimozione dei valori di una Map

Lo stesso schema con infer estrae i tipi dei valori da Map.

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

FlattenObject: unione di interfacce annidate

Un flattener di oggetti a livello di tipo unisce i tipi di oggetti annidati: è più complesso, ma utile per unire configurazioni profonde.

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

Uso pratico: rimozione dei wrapper delle risposte API

Rimuova i wrapper annidati delle risposte API per ottenere il tipo dei dati senza asserzioni di tipo manuali.

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

Riepilogo: Flatten e Unwrap

Flatten e UnwrapPromise utilizzano tipi condizionali ricorsivi con infer per rimuovere i wrapper dei tipi. Utilizzi Awaited per rimuovere i wrapper dei promise e scriva una ricorsione personalizzata per le altre strutture.

Verifica rapida

Che cosa restituisce Flatten?

Cosa ha imparato

Flatten e UnwrapPromise sono tipi condizionali ricorsivi che rimuovono i wrapper generici. Li combini per semplificare tipi annidati complessi e utilizzi il tipo integrato Awaited per le catene di promise.

Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
101
Lezioni
352

Domande Frequenti

La lezione «Utility Flatten e UnwrapPromise» è gratuita?

Sì — il testo completo di «Utility Flatten e UnwrapPromise» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Utility Flatten e UnwrapPromise»?

Scriva tipi che rimuovano i wrapper dalle strutture generiche annidate. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Utility Flatten e UnwrapPromise»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. DeepPartial e DeepReadonly
  2. Utility Flatten e UnwrapPromise
  3. TupleToUnion e UnionToIntersection
  4. Pubblicazione di una libreria di utility per i tipi
← Torna a TypeScript Academy