TypeScript è passato da un esperimento di nicchia di Microsoft alla scelta predefinita per progetti JavaScript seri. Nell'indagine State of JS del 2024, oltre l'80% degli intervistati ha dichiarato di utilizzare TypeScript regolarmente. Framework importanti come Angular, Next.js e SvelteKit vengono distribuiti "TypeScript-first". Se scrivi JavaScript professionalmente, imparare TypeScript non è più un optional: è un'aspettativa.

Cos'è TypeScript?

TypeScript è un superset di JavaScript creato da Microsoft. Ogni file JavaScript valido è anche un file TypeScript valido. TypeScript aggiunge una funzionalità principale: un sistema di tipi statici che cattura gli errori in fase di compilazione anziché in fase di runtime. Il compilatore TypeScript (tsc) rimuove tutte le annotazioni di tipo e produce JavaScript puro che funziona ovunque: Node.js, browser, Deno o Bun.

Perché Esiste TypeScript?

JavaScript è stato progettato per piccoli script, pensati per aggiungere interattività alle pagine web. Man mano che le applicazioni sono cresciute fino a milioni di righe di codice (pensa a Gmail, VS Code, Figma), la tipizzazione dinamica di JavaScript è diventata un limite. Bug che un linguaggio a tipizzazione statica avrebbe individuato in fase di compilazione — accesso a proprietà su undefined, passaggio di argomenti con tipi errati, refusi nelle chiavi degli oggetti — emergevano solo in runtime, spesso in produzione.

TypeScript risolve questo problema fornendo a JavaScript un controllore di tipi in fase di compilazione. Scrivi ancora codice simile a JavaScript, ma il compilatore verifica la coerenza dei tuoi tipi prima che tu distribuisca il tuo lavoro.

TypeScript vs JavaScript: Differenze Chiave

JavaScript (nessuna sicurezza sui tipi)
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet(42); // Errore in runtime: name.toUpperCase is not a function
TypeScript (rilevato in fase di compilazione)
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet(42); // ❌ Errore di compilazione: L'argomento del tipo 'number'
           // non è assegnabile al parametro di tipo 'string'

Concetti Fondamentali di TypeScript

1. Annotazioni di Tipo

La funzionalità più basilare di TypeScript. Annotate variabili, parametri e tipi di ritorno con il loro tipo atteso.

Annotazioni di Tipo Base
let username: string = "Alice";
let age: number = 30;
let isAdmin: boolean = true;
let scores: number[] = [95, 87, 92];

function add(a: number, b: number): number {
  return a + b;
}

2. Interfacce

Le interfacce definiscono la struttura degli oggetti. Sono una delle funzionalità più potenti di TypeScript per documentare e imporre contratti API.

Interfacce
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  lastLogin?: Date; // proprietà opzionale
}

function sendWelcome(user: User): void {
  console.log(`Welcome, ${user.name}!`);
}

// ❌ Errore di compilazione se dimentichi una proprietà obbligatoria
sendWelcome({ id: 1, name: "Alice" }); // Manca 'email' e 'role'

3. Tipi Union e Tipi Letterali

I tipi union permettono a un valore di essere di uno tra diversi tipi. Combinati con i tipi letterali, creano definizioni di tipo precise e auto-documentanti.

Tipi Union e Letterali
type Status = "loading" | "success" | "error";
type ID = string | number;

function showStatus(status: Status): string {
  switch (status) {
    case "loading": return "⏳ Loading...";
    case "success": return "✅ Done!";
    case "error":   return "❌ Failed";
  }
}

4. Generics

I Generics consentono di scrivere codice riutilizzabile che funziona con qualsiasi tipo, preservando al contempo la sicurezza dei tipi.

Generics
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]);       // tipo: number
const str = firstElement(["a", "b", "c"]); // tipo: string

Iniziare

Installazione e Configurazione
# Installa TypeScript
npm install -D typescript

# Crea tsconfig.json
npx tsc --init

# Compila TypeScript in JavaScript
npx tsc

# Modalità di osservazione (ricompila al salvataggio)
npx tsc --watch

Il file tsconfig.json controlla le opzioni del compilatore. Inizia con "strict": true: abilita l'intera suite di controlli sui tipi ed è considerata best practice per tutti i nuovi progetti.

Errori Comuni da Evitare

  • Usare any ovunque: Questo vanifica lo scopo di TypeScript. Se ti ritrovi a usare any, probabilmente hai bisogno di un'interfaccia o di un generic appropriato.
  • Ignorare gli errori del compilatore: Non usare @ts-ignore come abitudine. Correggi il problema di tipo sottostante.
  • Sovra-ingegnerizzare i tipi: Inizia in modo semplice. Non hai bisogno di tipi mappati avanzati o tipi condizionali per la maggior parte del codice applicativo.
  • Non usare la modalità strict: TypeScript non-strict rileva molti meno bug. Abilita sempre la modalità strict.

Quando Usare TypeScript

  • Qualsiasi progetto con più di uno sviluppatore
  • Librerie e pacchetti pubblicati su npm
  • Codebase che si prevede vivranno più di 6 mesi
  • Progetti che utilizzano framework che lo supportano nativamente (Next.js, Angular, SvelteKit)

Prova i Nostri Strumenti Gratuiti per Sviluppatori

Minifica, formatta e codifica il tuo codice istantaneamente nel tuo browser.