TypeScript: i tipi avanzati che usiamo ogni giorno
Oltre i tipi di base
TypeScript non serve solo ad annotare stringhe e numeri. I suoi tipi avanzati permettono di modellare con precisione la realta del dominio, intercettando interi categorie di bug a tempo di compilazione.
Union e narrowing
I union type descrivono valori che possono assumere forme diverse. Il narrowing restringe il tipo in base ai controlli runtime.
type Risultato =
| { stato: "ok"; dati: string[] }
| { stato: "errore"; messaggio: string };
function gestisci(r: Risultato) {
if (r.stato === "ok") {
return r.dati.length; // qui r e del ramo "ok"
}
return r.messaggio; // qui r e del ramo "errore"
}
Generics e utility type
I generics rendono il codice riutilizzabile mantenendo la tipizzazione. Le utility type integrate (Partial, Pick, Omit, Record) coprono i casi piu comuni senza scrivere tipi a mano.
type Utente = { id: string; nome: string; email: string };
type AggiornaUtente = Partial<Omit<Utente, "id">>;
Type guard personalizzati
Quando i controlli si fanno complessi, un type guard rende il codice leggibile e sicuro:
function isUtente(x: unknown): x is Utente {
return typeof x === "object" && x !== null && "email" in x;
}
Conclusione
Usati con misura, i tipi avanzati documentano il codice e prevengono errori. In MUSTNODE li adottiamo per costruire basi di codice solide e facili da mantenere nel tempo.
Articoli correlati
Altri approfondimenti dalla categoria Frontend & JavaScript.
Next.js App Router: la guida pratica
Server Component, layout, routing a file system e data fetching: come e cambiato lo sviluppo con l'App Router di Next.js.
React Server Components spiegati semplice
Cosa sono i React Server Components, in cosa differiscono dai Client Component e quando usarli per ridurre il JavaScript inviato al browser.
Layout CSS moderni: Grid e Flexbox
Quando usare Flexbox e quando CSS Grid: una guida pratica per costruire layout responsive senza hack.