Frontend Academy · Lezione

Mapped type e conditional type

Creare mapped type per trasformare tutte le proprietà di un tipo e usare conditional type con infer per una logica avanzata a livello di tipo.

Mapped type e conditional type è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Mapped types — Trasformare ogni proprietà

I mapped types iterano sulle chiavi di un tipo e le trasformano. Sono alla base dei tipi utility Partial, Readonly e 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];
};

Rimappare le chiavi con as

Utilizzi as nella clausola di mapping per rimappare i nomi delle chiavi. Lo combini con i tipi template literal per ottenere trasformazioni potenti.

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 }

Filtrare le proprietà con never

Restituisca never durante la rimappatura di una chiave per rimuovere quella proprietà dal tipo risultante.

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

Tipi condizionali — if/else per i tipi

I tipi condizionali utilizzano lo schema T extends U ? TrueType : FalseType. Vengono valutati a livello di tipo, non durante l'esecuzione.

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

Tipi condizionali distributivi

Quando T è un'unione, i tipi condizionali vengono distribuiti su ogni membro. string | number extends string ? ... verifica ciascun membro separatamente: (string extends string ? ...) | (number extends string ? ...).

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

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

Usare infer per estrarre i tipi

infer R introduce una variabile di tipo che TypeScript valorizza. Consente di catturare parti della struttura di un tipo.

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

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

Tipi template literal

I tipi template literal utilizzano la stessa sintassi dei template literal, con i backtick, ma a livello di tipo, creando tipi unione dalle combinazioni di string literal.

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'

Combinare mapped types e conditional types

I pattern TypeScript più potenti combinano entrambi. I tipi built-in required, partial, readonly e record sono tutti 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 — Tipo utility ricorsivo

Il tipo utility Partial integrato opera a un solo livello di profondità. DeepPartial ricorre negli oggetti annidati.

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

Utilizzo reale: tipi delle risposte API

I tipi mappati e condizionali consentono potenti derivazioni dei tipi delle API, ad esempio per estrarre solo le proprietà serializzabili in JSON di un oggetto.

Evitare l'overengineering

Complesse manipolazioni dei tipi possono rendere difficile comprendere il codice. Si chieda sempre: un semplice alias di tipo o un'interfaccia sarebbe più chiaro? I tipi devono documentare l'intento, non dimostrare la padronanza di TypeScript.

Verifica rapida

A cosa equivale T extends U ? A : B quando T è un tipo unione?

Riepilogo: tipi mappati e condizionali

I tipi mappati iterano sulle chiavi con [K in keyof T]. Utilizzi as per rimappare le chiavi. Restituisca never per filtrare. I tipi condizionali sono espressi come T extends U ? A : B. infer estrae variabili di tipo. I tipi literal di template costruiscono unioni di stringhe. Combini entrambi per ottenere potenti trasformazioni dei tipi, come DeepPartial e Asyncify.

Domande Frequenti

La lezione «Mapped type e conditional type» è gratuita?

Sì — il testo completo di «Mapped type e conditional type» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Mapped type e conditional type»?

Creare mapped type per trasformare tutte le proprietà di un tipo e usare conditional type con infer per una logica avanzata a livello di tipo. Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 3 di 4.

Quanto tempo richiede la lezione «Mapped type e conditional type»?

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

Sì. Ogni lezione Frontend 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

Generics: T extends e vincoli
Utility type: Partial, Required, Pick e Omit
Mapped type e conditional type
Narrowing: typeof, instanceof e union discriminate

← Torna a Frontend Academy