0Pricing
Frontend Academy · Lezione

Utility type: Partial, Required, Pick e Omit

Trasformare i tipi esistenti con gli utility type integrati per creare varianti senza duplicare il codice.

Utility type: Partial, Required, Pick e Omit è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Tipi utility integrati

TypeScript include un insieme di tipi utility generici che trasformano altri tipi. Evitano di dover riscrivere manualmente varianti simili delle interfacce.

Partial<T>

Rende facoltative tutte le proprietà di T. È ideale per i payload di aggiornamento o patch in cui non è necessario fornire tutti i campi.

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

È l'opposto di Partial: rende obbligatorie tutte le proprietà, rimuovendo i modificatori opzionali (?).

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Crea un tipo contenente solo le proprietà specificate di T. È utile per ridurre oggetti grandi ai soli campi necessari.

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Crea un tipo rimuovendo le proprietà specificate. È l'inverso di Pick.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Rende tutte le proprietà readonly, impedendone la riassegnazione. È utile per gli oggetti di configurazione e i dati immutabili.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Crea un tipo oggetto con chiavi di tipo K e valori di tipo V. È più pulito di una firma di indice grezza quando le chiavi sono un'unione nota.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> e Parameters<T>

Estraggono il tipo restituito e i tipi dei parametri di un tipo funzione. Sono utili quando non è possibile importare un tipo, ma occorre replicare la firma di una funzione.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Rimuove il wrapper Promise da un tipo, ottenendo il tipo del valore risolto. È utile quando si lavora con funzioni asincrone.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> e Exclude<T, U>

Extract<T, U> mantiene solo i tipi di T assegnabili a U. Exclude<T, U> li rimuove.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Comporre i tipi utility

I tipi utility possono essere combinati per creare tipi precisi.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

Verifica rapida

Quale tipo utility rimuove le chiavi specificate da un'interfaccia?

Riepilogo: tipi utility

Partial rende facoltativi tutti i campi. Required rimuove i modificatori opzionali. Pick mantiene le chiavi selezionate. Omit rimuove le chiavi selezionate. Readonly impedisce la mutazione. Record associa chiavi di un'unione a tipi di valore. ReturnType e Parameters estraggono i tipi delle funzioni. Combini le utility per creare tipi DTO precisi.

Domande Frequenti

La lezione «Utility type: Partial, Required, Pick e Omit» è gratuita?

Sì — il testo completo di «Utility type: Partial, Required, Pick e Omit» è 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 «Utility type: Partial, Required, Pick e Omit»?

Trasformare i tipi esistenti con gli utility type integrati per creare varianti senza duplicare il codice. 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 2 di 4.

Quanto tempo richiede la lezione «Utility type: Partial, Required, Pick e Omit»?

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

  1. Generics: T extends e vincoli
  2. Utility type: Partial, Required, Pick e Omit
  3. Mapped type e conditional type
  4. Narrowing: typeof, instanceof e union discriminate
← Torna a Frontend Academy