TypeScript vs JavaScript: Cosa Cambia, Cosa Genera tsc | We.Inc
Guarda TypeScript e il JavaScript in cui viene compilato fianco a fianco, scopri cosa rileva il type checker, perché i tipi spariscono a runtime e quando basta JavaScript puro.
TypeScript è JavaScript più un sistema di tipi. Scrivi normale JavaScript con annotazioni di tipo facoltative, e il compilatore tsc le verifica, poi le rimuove per produrre JavaScript puro. Browser e Node eseguono quel risultato, quindi i tipi non esistono mai a runtime. Il vantaggio è scoprire gli errori mentre scrivi, non avere codice più veloce.
Fianco a fianco
Domanda
JavaScript
TypeScript
Gira direttamente nel browser?
Sì
No, prima viene compilato o ripulito in JavaScript
Quando si scoprono gli errori di tipo?
Quando il codice viene eseguito
Mentre scrivi e quando tsc esegue il controllo
Estensioni dei file
.js, .mjs, .jsx
.ts, .tsx (.d.ts per le dichiarazioni)
Tipi a runtime
Solo valori
Nessuno, le annotazioni vengono cancellate
Serve una fase di build?
Facoltativa
Sì per il controllo; uno stripper o un bundler per eseguirlo
Il JavaScript valido è un input valido?
Sì
Sì, anche se il checker può segnalare errori
Scegli un esempio qui sotto per vedere un file TypeScript accanto al JavaScript che tsc ha scritto per lui. Nella maggior parte dei casi il risultato è il tuo codice con le annotazioni cancellate. Alcune funzionalità, come gli enum, generano codice vero, e questa differenza conta quando scegli gli strumenti.
Scegli un esempio: annotazioni semplici, un'interfaccia, un enum, un const enum o un errore di tipo.
Leggi il sorgente TypeScript a sinistra e il JavaScript generato a destra.
Controlla la nota sotto ogni coppia per vedere cosa ha verificato il compilatore e cosa è rimasto nel risultato.
Copia uno dei due lati per provarlo nel tuo progetto.
Aggiungi un tsconfig.json con strict impostato a true fin dal primo giorno. Attivarlo più tardi in una codebase grande fa emergere centinaia di errori tutti insieme.
Durante la migrazione, rinomina un file .js in .ts alla volta. Impostare allowJs permette a entrambi i tipi di file di convivere nello stesso progetto mentre passi dall'uno all'altro.
Ricorda che il JSON di un server non ha tipo finché non lo verifichi. Un'annotazione di tipo sui dati scaricati è una promessa al compilatore, non un controllo a runtime.
Usa uno stripper veloce (Vite, esbuild o il type stripping di Node) per eseguire il codice e tieni tsc --noEmit come controllo separato nell'editor e nella CI.
Domande frequenti
TypeScript è un linguaggio diverso da JavaScript?
È un superset. Ogni programma TypeScript diventa JavaScript, e TypeScript aggiunge una sintassi per descrivere la forma dei valori. Impara prima JavaScript; i tipi stanno sopra di esso invece di sostituirlo.
TypeScript rende il mio sito più veloce?
No. Le annotazioni vengono rimosse prima dell'esecuzione, quindi il browser esegue lo stesso JavaScript che avresti scritto a mano. I vantaggi sono meno bug che arrivano agli utenti e refactoring più sicuri.
tsc si rifiuta di compilare se c'è un errore di tipo?
Non per impostazione predefinita. tsc segnala l'errore e scrive comunque il file .js, cosa che rende possibile una migrazione graduale. Imposta noEmitOnError se vuoi che un controllo fallito blocchi il risultato.
Node può eseguire file .ts senza una fase di build?
Le versioni recenti di Node rimuovono la sintassi di tipo cancellabile ed eseguono il file, con il type stripping attivo per impostazione predefinita da v23.6.0 e v22.18.0. Node non esegue il controllo dei tipi, e la sintassi che richiede codice generato, come gli enum, viene rifiutata.
Quando JavaScript puro è la scelta migliore?
Piccoli script, prototipi veloci e pagine con poche righe di interattività raramente ripagano la configurazione. Quando un progetto ha più file, più persone o dati che passano tra moduli, il checker inizia a far risparmiare tempo reale.
Cosa fa davvero tsc
Il compilatore ha due compiti che spesso vengono confusi. Primo, il controllo dei tipi: legge ogni file, ricava il tipo di ogni valore e segnala tutto ciò che non torna. Secondo, la generazione: scrive JavaScript senza la sintassi di tipo e, se lo chiedi, riscrive la sintassi più recente per target più vecchi.
Le toolchain moderne di solito separano questi compiti. Un bundler come Vite rimuove i tipi velocemente senza controllare nulla, e tsc --noEmit esegue il controllo completo a parte, nell'editor o nella CI. Se esegui solo il bundler, gli errori di tipo possono finire in produzione.
I tipi vengono cancellati, quindi valida i dati reali
Poiché le annotazioni spariscono, TypeScript non può impedire a un server di inviare una stringa dove hai dichiarato un numero. Scrivere const user: User = await res.json() dice solo al checker di fidarsi di te.
Ai confini del tuo programma, come input dei moduli, risposte di fetch e local storage, controlla il valore a runtime con una piccola funzione di guardia o una libreria di schemi, e lascia che il checker porti quella garanzia verso l'interno.
Funzionalità che non vengono semplicemente cancellate
Enum, namespace con codice, parameter properties e alias import = producono tutti JavaScript proprio. TypeScript 5.8 ha aggiunto l'opzione erasableSyntaxOnly, che segnala un errore per questi casi, così un file funziona con gli stripper che si limitano a cancellare le annotazioni.
Se intendi eseguire file .ts direttamente in Node o tramite un altro stripper, preferisci union di string literal e oggetti as const agli enum. La guida agli enum su questo sito mostra entrambi fianco a fianco.
Aggiungere TypeScript a un progetto JavaScript
Installare e creare un tsconfig
Installa il compilatore in locale, scrive un tsconfig.json iniziale ed esegue un controllo senza scrivere file.
allowJs permette ai vecchi file .js di stare accanto ai nuovi file .ts durante una migrazione; noEmit lascia la generazione del risultato al tuo bundler.
Controllare i dati che il compilatore non vede
Una guardia a runtime che restringe il tipo
La funzione verifica davvero il valore, e il tipo di ritorno dice al compilatore cosa ha dimostrato.
Annotazioni
I tipi del parametro e del valore di ritorno vengono verificati, poi cancellati. Il corpo resta intatto.
Interfaccia
Un'interfaccia non produce alcun output. Esiste solo per il checker.
Enum
Un enum normale diventa un vero oggetto con mappatura inversa, quindi è codice generato, non sintassi cancellata.
const enum
tsc inserisce i membri del const enum direttamente come numeri e lascia un commento con il nome originale.
Errore di tipo
tsc segnala: Argument of type 'string' is not assignable to parameter of type 'number'. Scrive comunque il file a meno che non sia impostato noEmitOnError.