Come usare il compilatore TypeScript online
- Scrivi o incolla TypeScript nell'editor, oppure parti dall'esempio (Ripristina esempio lo ripristina).
- Premi Esegui oppure usa Ctrl + Invio (⌘ + Invio su Mac).
- Il tuo codice viene compilato in JavaScript. Se il compilatore trova un errore di sintassi, viene elencato con il suo codice di errore
TS, la riga e la colonna, e non viene eseguito nulla. - Se la compilazione riesce, il JavaScript viene eseguito. L'output di
console.logcompare nel pannello Output, e puoi aprire JavaScript generato sotto l'editor per vedere esattamente cosa ha prodotto il compilatore. - Scegli un limite di tempo di 5, 15 o 60 secondi, oppure premi Interrompi per terminare in anticipo un'esecuzione.
Alla prima esecuzione la pagina scarica il compilatore TypeScript ufficiale, circa 3 MB. Il browser lo mette in cache, quindi le esecuzioni successive partono rapidamente.
Compilazione ed esecuzione avvengono entrambe in un Web Worker nel tuo browser. Il tuo codice non viene caricato e non viene memorizzato sui nostri server. L'editor salva il tuo ultimo codice nel local storage del browser, e in nessun altro posto.
Cosa è supportato
Questa pagina usa TypeScript 5.6, il compilatore ufficiale di Microsoft. Ha come destinazione ES2022 ed esegue il risultato sul motore JavaScript del tuo browser.
- Tutta la sintassi TypeScript: annotazioni di tipo, interfacce, alias di tipo, generics, tipi union e intersection, enum, modificatori di accesso,
satisfies,as conste altro. - Output JavaScript moderno con classi, async/await e optional chaining lasciati intatti.
awaita livello superiore, timer e promise, proprio come nel compilatore JavaScript online.
Limitazioni:
- Solo transpile. Il compilatore rimuove i tipi e segnala gli errori di sintassi, ma non esegue un controllo completo dei tipi. Codice come
const n: number = "text"viene compilato ed eseguito. Usatsc --noEmito il tuo editor quando ti servono gli errori di tipo semantici. - Nessun DOM: il codice gira in un worker, quindi
documentewindownon sono disponibili. - Nessun import: pacchetti npm, istruzioni
importe API di Node.js non possono essere usati.
Guida rapida a TypeScript
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Concetto | Sintassi |
|---|---|
| Variabile tipizzata | let count: number = 0; |
| Interfaccia | interface User { id: number; name?: string } |
| Tipo union | type Id = string | number; |
| Funzione generica | function wrap<T>(v: T): T[] { return [v]; } |
| Array di sola lettura | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
Consigli
- Apri JavaScript generato per capire come vengono compilate funzionalità come enum, parameter properties e campi di classe. È un modo rapido per capire cosa fa TypeScript a runtime.
- Ricorda che i tipi scompaiono a runtime. Per validare dati esterni (come JSON analizzato), scrivi controlli a runtime o type guard come
function isUser(x: unknown): x is User. - Devi sistemare l'output prima di copiarlo in un progetto? Incollalo nel formattatore e minificatore JavaScript.
TS1005: ';' expected significa che il codice non ha potuto essere analizzato. Correggi la riga e la colonna indicate nell'output, poi esegui di nuovo.Domande frequenti
Questo strumento controlla i miei tipi?
No. Usa la modalità transpile del compilatore, che segnala solo errori di sintassi. Questo lo mantiene veloce e leggero, ma le incongruenze di tipo non vengono segnalate. Per un controllo completo, esegui tsc in locale o usa un editor con il language service di TypeScript.
Qual è la differenza tra TypeScript e JavaScript?
TypeScript è JavaScript con tipi statici facoltativi. I browser non possono eseguire TypeScript direttamente, quindi viene prima compilato in JavaScript puro rimuovendo i tipi e riducendo alcune funzionalità esclusive di TypeScript, come gli enum. Puoi vedere il risultato di questo passaggio in questa pagina.
Quale versione di TypeScript viene usata?
TypeScript 5.6, con ES2022 come destinazione dell'output.
Posso importare librerie?
No. Ogni esecuzione compila ed esegue un singolo file senza risoluzione dei moduli, quindi le istruzioni import e i pacchetti npm non sono supportati. Guarda tutti i nostri strumenti per sviluppatori per utilità correlate.
Aggiornato