Cos'è TypeScript? Guida per principianti con esempi

TypeScript è JavaScript con i tipi statici. Aggiungi annotazioni di tipo a variabili, parametri e valori di ritorno, il compilatore di TypeScript le controlla prima che il programma venga eseguito e genera JavaScript normale senza i tipi. Quel JavaScript funziona ovunque funzioni JavaScript: browser, Node.js, Deno e Bun.

Ecco un piccolo programma TypeScript. Premi Run.

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

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Output:

Ada is 36 years old
82.33333333333333

A parte ciò che segue i due punti (: string, : User, : number[]) e l'interface, questo è JavaScript. Queste aggiunte dicono al compilatore che cosa può essere ogni valore. Nota che total non ha annotazioni: TypeScript capisce da solo che è un numero. La maggior parte del codice TypeScript annota i confini delle funzioni e lascia che il compilatore deduca il resto.

Cosa trova il controllo dei tipi

Lo scopo delle annotazioni è che gli errori emergano mentre scrivi il codice, non quando li incontra un utente. Esegui questo blocco e leggi l'output:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Il programma non parte nemmeno. Il compilatore stampa invece due errori:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Ogni errore indica il file, la riga e la colonna, un codice di errore (TS2322) e che cosa non va. In JavaScript puro entrambe le righe verrebbero eseguite, e la seconda stamperebbe Linus is undefined years old senza alcun avviso. In un editor come VS Code gli stessi errori compaiono come sottolineature rosse mentre scrivi, insieme a un completamento automatico che sa che user ha esattamente un name e un age.

Errori tipici che il controllo dei tipi trova:

• Il nome di una proprietà o di un metodo scritto male (user.nmae, list.lenght).
• Chiamare una funzione con troppi o troppo pochi argomenti, o con argomenti del tipo sbagliato.
• Usare un valore che potrebbe essere null o undefined senza prima controllarlo.
• Dimenticare di gestire un caso di un'unione come "loading" | "done" | "error", quando il codice usa un controllo esaustivo.
• Codice che si rompe quando una funzione da cui dipendi cambia firma.

I tipi spariscono a runtime

I tipi di TypeScript esistono solo in compilazione. Il compilatore li controlla e poi li rimuove: il JavaScript che genera non ha annotazioni né interfacce, e si comporta esattamente come JavaScript scritto a mano.

Questo input:

function double(n: number): number {
    return n * 2;
}

diventa questo output:

function double(n) {
    return n * 2;
}

Quindi TypeScript non può controllare i valori che arrivano mentre il programma gira. Qui il testo JSON dice di essere un User, il compilatore deve fidarsi di questa affermazione, e nemmeno a runtime qualcosa si lamenta:

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

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Output:

string
thirty-six1

I dati che arrivano da fuori del programma (risposte di API, input di moduli, file) hanno bisogno di un controllo a runtime, per esempio una funzione type guard che esamina il valore. TypeScript si fida poi di quel controllo e restringe il tipo per te.

Chi ha creato TypeScript e perché

TypeScript è nato in Microsoft, con Anders Hejlsberg (il progettista di C#) alla guida del progetto. È stato reso pubblico nell'ottobre 2012 come versione 0.8, e la 1.0 è arrivata nell'aprile 2014. È open source con licenza Apache 2.0 e viene sviluppato su GitHub. Secondo il conteggio dei contributori mensili di GitHub, ad agosto 2025 TypeScript è diventato il linguaggio più usato su GitHub, davanti a Python e JavaScript.

La motivazione erano le grandi codebase JavaScript. JavaScript non ha modo di dire "questa funzione riceve un oggetto utente", quindi rinominare una proprietà o cambiare una funzione significava cercare in tutta la codebase e sperare che i test coprissero ogni chiamata. TypeScript aggiunge questa informazione restando pienamente compatibile con JavaScript:

• È un superset. Il JavaScript valido è sintassi TypeScript valida, quindi un progetto può passare a TypeScript un file alla volta.
• Segue JavaScript. A parte alcune aggiunte dei primi tempi come enum e namespace, TypeScript non aggiunge funzionalità a runtime proprie; la nuova sintassi arriva dallo standard JavaScript.
• I tipi non costano nulla a runtime. Vengono cancellati, quindi l'output è veloce quanto JavaScript scritto a mano.

L'attuale versione principale è TypeScript 7, il cui compilatore è stato riscritto in Go come programma nativo e controlla i tipi dei progetti grandi circa dieci volte più velocemente del compilatore basato su JavaScript che ha sostituito. La pagina su TypeScript 7 spiega cosa è cambiato.

A cosa serve TypeScript? Frontend e backend

TypeScript si usa per lo stesso software di JavaScript, sia nel frontend sia nel backend. Dato che l'output è JavaScript, TypeScript va ovunque vada JavaScript:

Lo stesso linguaggio copre entrambi i lati di un'applicazione web, ed è per questo che molti team condividono le definizioni di tipo (per esempio la forma di una risposta di un'API) tra il codice del server e quello del browser.

Come il codice TypeScript diventa JavaScript

Ci sono due compiti separati, e se ne occupano strumenti diversi:

1. Controllo dei tipi. Lo fa solo il compilatore di TypeScript, di solito con il comando tsc (deno check di Deno esegue una copia dello stesso compilatore). Legge i tuoi file .ts, segnala gli errori e di default scrive anche i file .js.
2. Rimozione dei tipi. Può farla tsc, e anche strumenti più veloci che saltano del tutto il controllo dei tipi: esbuild, SWC, Babel e la rimozione dei tipi integrata in Node.js, Deno e Bun.

Una configurazione comune usa uno strumento veloce per eseguire il codice e tsc --noEmit (solo controllo, nessun file scritto) nell'editor e in CI. Installare tsc ed eseguire un file .ts hanno ciascuno una pagina dedicata in questo capitolo.

Le funzionalità principali in un esempio

Il TypeScript di tutti i giorni usa un piccolo insieme di funzionalità. Questo blocco riunisce le principali:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Output:

Ada ada@example.com
Ada can log in
Linus is banned

• Annotazioni di tipo (name: string): dicono cosa contiene una variabile, un parametro, una proprietà o un valore di ritorno.
• Deduzione dei tipi: completa i tipi che ometti; account prende il suo tipo da ciò che restituisce first.
• Interfacce e type alias (interface Account, type Status): danno un nome alla forma dei tuoi dati.
• Tipi unione ("active" | "banned", T | undefined): descrivono un valore che può essere una tra più cose.
• Narrowing: dopo un controllo come account !== undefined, il compilatore sa quale caso vale dentro il blocco.
• Proprietà opzionali (email?: string): possono mancare, quindi il loro tipo include undefined.
• Generics (first<T>): permettono a una funzione o a un tipo di lavorare con molti tipi mantenendoli collegati: entra un array di Account, esce un Account.

Bisogna imparare prima JavaScript?

Aiuta, ma puoi imparare entrambi insieme. Tutto ciò che riguarda il comportamento del codice TypeScript a runtime (variabili, funzioni, oggetti, array, promise, classi) è JavaScript, e TypeScript aggiunge uno strato che descrive quei valori. Se conosci già JavaScript, la parte nuova è il sistema di tipi: annotazioni, interfacce, unioni, generics e narrowing. Se sei alle prime armi con entrambi, parti dalle basi dei valori e delle funzioni di JavaScript, poi aggiungi i tipi strada facendo; i messaggi di errore del compilatore sono un ottimo insegnante, perché indicano la riga esatta in cui un valore viene usato nel modo sbagliato.

Un ordine pratico per imparare TypeScript: installalo ed esegui un primo file, impara i tipi di base e i tipi oggetto, poi i tipi unione e il narrowing, e dopo le funzioni e i generics. Questo copre la maggior parte del codice di un'applicazione.