TypeScript Cheat Sheet
Ultimo aggiornamento
Tipi base
I tipi primitivi e come annotare le variabili.
| Operazione | Sintassi |
|---|---|
| Stringa | let name: string = "Ada"; |
| Numero | let age: number = 25; |
| Booleano | let ok: boolean = true; |
| Array di T | let xs: number[] = [1, 2, 3]; |
| Array generico | let xs: Array<string> = []; |
| Tupla | let pair: [string, number] = ["a", 1]; |
| Any (disattiva la tipizzazione) | let x: any = 1; |
| Unknown (any più sicuro) | let x: unknown = JSON.parse(s); |
| Void (nessun ritorno) | function log(): void { … } |
| Never (non ritorna mai) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Inferenza e annotazioni di tipo
Quando lasciare che TS deduca il tipo e quando annotarlo.
| Operazione | Sintassi |
|---|---|
| Dedotto dal valore | let count = 0; // number |
| Annotazione esplicita | let count: number = 0; |
| Parametro di funzione | function add(a: number, b: number) { … } |
| Tipo di ritorno | function add(a: number, b: number): number { … } |
| Arrow function | const sq = (x: number): number => x * x; |
| Asserzione di tipo | const el = input as HTMLInputElement; |
| Const assertion (letterale) | const dirs = ["up", "down"] as const; |
| Asserzione non null | el!.focus(); |
Interfacce
Descrivono la forma di un oggetto.
| Operazione | Sintassi |
|---|---|
| Dichiarare | interface User { id: number; name: string; } |
| Proprietà opzionale | interface User { age?: number; } |
| Proprietà di sola lettura | interface User { readonly id: number; } |
| Firma di metodo | interface Logger { log(msg: string): void; } |
| Estendere un'altra interfaccia | interface Admin extends User { role: string; } |
| Firma di indice | interface Map { [key: string]: number; } |
| Implementare in una classe | class Db implements Logger { … } |
Alias di tipo e union
Dai un nome a un tipo e combina tipi con | e &.
| Operazione | Sintassi |
|---|---|
| Alias di tipo | type ID = string | number; |
| Alias di tipo oggetto | type User = { id: number; name: string }; |
| Tipo union | type Status = "idle" | "loading" | "done"; |
| Tipo intersezione | type Admin = User & { role: string }; |
| Tipo letterale | type Yes = "yes"; |
| Nullable | type Maybe<T> = T | null | undefined; |
| Alias di tipo funzione | type Handler = (e: Event) => void; |
Funzioni
Parametri tipizzati, valori di ritorno e overload.
| Operazione | Sintassi |
|---|---|
| Parametro opzionale | function greet(name?: string) { … } |
| Parametro predefinito | function greet(name = "friend") { … } |
| Parametri rest | function sum(...ns: number[]): number { … } |
| Tipo funzione | let fn: (a: number) => number; |
| Interfaccia richiamabile | interface Fn { (x: number): number; } |
| Firme di overload | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Ritorno void ignorato | const cb: () => void = () => 42; // ok |
Classi
Classi con modificatori di accesso e parameter properties.
| Operazione | Sintassi |
|---|---|
| Dichiarare una classe | class User { name: string; } |
| Costruttore | constructor(name: string) { this.name = name; } |
| Parameter property | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Campo readonly | readonly id: number; |
| Membro statico | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Ereditarietà | class Admin extends User { … } |
| Classe astratta | abstract class Shape { abstract area(): number; } |
Generics
Tipi riutilizzabili parametrizzati da altri tipi.
| Operazione | Sintassi |
|---|---|
| Funzione generica | function id<T>(x: T): T { return x; } |
| Chiamata con tipo esplicito | id<string>("hi"); |
| Interfaccia generica | interface Box<T> { value: T; } |
| Alias di tipo generico | type Pair<A, B> = [A, B]; |
| Classe generica | class Stack<T> { items: T[] = []; } |
| Vincolo con extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Parametro di tipo predefinito | interface Box<T = string> { value: T; } |
| Operatore keyof | type K = keyof User; // "id" | "name" |
| Tipo di accesso per indice | type Name = User["name"]; |
Narrowing
Restringe una union a un solo tipo in fase di esecuzione.
| Operazione | Sintassi |
|---|---|
| Controllo con typeof | if (typeof x === "string") { … } |
| Controllo con instanceof | if (e instanceof Error) { … } |
| Operatore in | if ("name" in obj) { … } |
| Narrowing per uguaglianza | if (status === "done") { … } |
| Truthiness | if (value) { … } |
| Type guard personalizzato | function isUser(x: any): x is User { return "id" in x; } |
| Union discriminata | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Esaustività con never | const _: never = shape; |
Enum
Insiemi di costanti con nome.
| Operazione | Sintassi |
|---|---|
| Enum numerico | enum Direction { Up, Down, Left, Right } |
| Enum di stringhe | enum Status { Idle = "IDLE", Done = "DONE" } |
| Usare un valore | let d: Direction = Direction.Up; |
| Const enum (inserito inline) | const enum Color { Red, Green, Blue } |
| Union di letterali (moderno) | type Status = "idle" | "done"; |
Utility types
Helper integrati che trasformano tipi esistenti.
| Operazione | Sintassi |
|---|---|
| Rendere opzionali tutte le proprietà | Partial<User> |
| Rendere obbligatorie tutte le proprietà | Required<User> |
| Rendere readonly tutte le proprietà | Readonly<User> |
| Scegliere un sottoinsieme di chiavi | Pick<User, "id" | "name"> |
| Omettere una o più chiavi | Omit<User, "password"> |
| Oggetto con chiavi specificate | Record<string, number> |
| Escludere da una union | Exclude<"a" | "b" | "c", "a"> |
| Estrarre da una union | Extract<"a" | "b", "a" | "c"> |
| Rimuovere null / undefined | NonNullable<string | null> |
| Tipo di ritorno di una funzione | ReturnType<typeof fn> |
| Tupla dei parametri di una funzione | Parameters<typeof fn> |
| Tipo risolto di una promise | Awaited<Promise<string>> |
Moduli
Importare ed esportare tra file.
| Operazione | Sintassi |
|---|---|
| Export con nome | export function add(a: number, b: number) { … } |
| Export predefinito | export default class User { … } |
| Riesportare | export { User } from "./user"; |
| Import con nome | import { add } from "./math"; |
| Import predefinito | import User from "./user"; |
| Importare solo un tipo | import type { User } from "./user"; |
| Importare tutto | import * as math from "./math"; |
| Riferimento a tripla barra | /// <reference types="node" /> |
Le basi di tsconfig
Le opzioni del compilatore che vale la pena conoscere.
| Opzione | Effetto |
|---|---|
"strict": true | Attiva tutti i controlli della modalità strict (consigliato). |
"target": "ES2022" | Versione di JavaScript generata da tsc. |
"module": "ESNext" | Sistema di moduli nell'output generato. |
"moduleResolution": "bundler" | Risolve i moduli come fanno i bundler moderni. |
"jsx": "react-jsx" | Abilita JSX per React 17+. |
"esModuleInterop": true | Import predefiniti più puliti dai moduli CommonJS. |
"skipLibCheck": true | Salta il controllo dei tipi in node_modules (build più veloci). |
"noEmit": true | Solo controllo dei tipi: lascia la generazione del codice al bundler. |
La sintassi TypeScript che usi più spesso, in una sola pagina. Questa TypeScript cheat sheet è un riferimento rapido per il TS di tutti i giorni: tipi base, interfacce, alias di tipo, generics, union, narrowing e gli utility types integrati. Dato che TypeScript si basa su JavaScript, tieni a portata di mano la JavaScript cheat sheet per la sintassi di base.
Tutto quello che trovi qui è TypeScript standard che compila con tsc e funziona ovunque giri JavaScript moderno. Copia ciò che ti serve o prova qualsiasi snippet dal vivo nel playground TypeScript, senza installare nulla. Sei alle prime armi con i tipi? Il corso TypeScript interattivo e gratuito di Coddy te li presenta partendo da JavaScript.
Domande frequenti sulla TypeScript cheat sheet
Questa TypeScript cheat sheet è gratuita?
Sì. Questa TypeScript cheat sheet è completamente gratuita e non richiede registrazione. Salvala nei preferiti e torna qui ogni volta che devi cercare un tipo, un'interfaccia o un utility type.
Qual è la differenza tra un'interfaccia e un alias di tipo?
Entrambi possono descrivere la forma di un oggetto e, nella maggior parte dei casi quotidiani, sono intercambiabili. Le interfacce possono essere riaperte ed estese tra più file (declaration merging), cosa utile per i tipi delle librerie. Gli alias di tipo possono dare un nome a union, intersezioni, tuple e mapped types: forme che non puoi esprimere con
interface. Una regola comune: usa interface per le forme pubbliche degli oggetti e type per union, tuple e tipi calcolati.Qual è la differenza tra any e unknown?
any disattiva completamente il controllo dei tipi: il compilatore ti lascia fare qualsiasi cosa. unknown è sicuro: devi restringerlo (con typeof, instanceof o un type guard) prima di poterlo usare. Preferisci unknown per i valori provenienti da fonti esterne come JSON.parse o fetch: ti obbliga a validarli prima dell'uso.Devo imparare JavaScript prima di TypeScript?
Sì: TypeScript è JavaScript con un sistema di tipi aggiunto sopra, quindi ogni competenza JavaScript resta valida. Se stai ancora costruendo le basi di JS (array, oggetti, async/await), la JavaScript cheat sheet è un buon punto di partenza e il corso JavaScript gratuito di Coddy copre gli stessi argomenti in modo interattivo.
Posso esercitarmi con TypeScript online?
Sì. Apri il playground TypeScript per eseguire nel browser qualsiasi snippet di questa cheat sheet, senza installare nulla. Quando vuoi un percorso strutturato, impara con il corso JavaScript e applica sopra i tipi di questa pagina.
Risorse correlate
Altre cheat sheet
