Che cos'è un esecutore TypeScript?

TypeScript è JavaScript con i tipi. Descrivi la struttura dei tuoi dati con interfacce e annotazioni di tipo, quindi il compilatore TypeScript trasforma il codice in semplice JavaScript prima di eseguirlo. Per provare alcune righe di codice, di solito è necessario configurare un progetto, un compilatore e un file di configurazione. Un esecutore TypeScript elimina tutti questi passaggi. Scrivi il codice, eseguilo e leggi ciò che stampa con console.log.

Descrizione dello strumento

Questo strumento esegue il tuo codice TypeScript nel browser e mostra tutto ciò che il codice scrive nella console. Digita o incolla il codice a sinistra e premi Esegui, oppure premi Ctrl+Invio (Cmd+Invio su Mac). L'output appare a destra, una riga per ogni chiamata a console, con avvisi ed errori evidenziati a colori. Nulla viene eseguito finché non lo richiedi, quindi puoi modificare liberamente il codice.

Il codice viene compilato dal compilatore TypeScript ufficiale ed eseguito in un Web Worker, ovvero un thread in background del browser. Di conseguenza, uno script che non termina non bloccherà la pagina: premi Interrompi e verrà terminato. Il tuo codice non viene inviato a un server.

Esempi

Descrivi i dati con un'interfaccia e lavoraci:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Libro", price: 12 },
  { name: "Penna", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Totale: ${total}`);
TypeScript

L'output è:

Totale: 13.5

Usa un enum e una classe con proprietà dei parametri:

enum Level {
  Low = "basso",
  High = "alto",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Scrivi test", Level.High).describe());
TypeScript

L'output è:

Scrivi test (alto)

Funzionalità

  • Esegue TypeScript con il compilatore ufficiale, quindi supporta tutta la sintassi TypeScript
  • Supporta enum, namespace, decorator, generics e proprietà dei parametri
  • Mostra gli errori di sintassi con la relativa riga e colonna, nello stesso formato di tsc
  • Mostra l'output di console.log, info, debug, warn ed error, con colori per avvisi ed errori
  • Formatta oggetti, array, mappe, set, classi, date ed errori e gestisce i riferimenti circolari
  • Supporta console.group, count, time, assert, dir e clear
  • Esegue codice asincrono, inclusi await a livello superiore, timer e promise
  • Segnala nell'output gli errori non intercettati e i rifiuti di promise non gestiti
  • Pulsante Interrompi che termina immediatamente uno script, anche se bloccato in un ciclo infinito
  • L'opzione Conserva i log, attiva per impostazione predefinita, mantiene l'output delle esecuzioni precedenti per consentirti di confrontare i risultati
  • Passa il mouse su una riga dell'output per vedere la data e l'ora in cui è stata registrata
  • Copia l'intero output, cancellalo con il pulsante Cancella oppure scarica il codice come file

Come funziona

Quando premi Esegui, il compilatore TypeScript rimuove i tipi dal codice e lo trasforma in JavaScript. Il compilatore viene caricato una sola volta all'apertura della pagina, quindi la prima esecuzione potrebbe richiedere qualche istante con una connessione lenta. Se il codice contiene un errore di sintassi, l'errore viene mostrato e il codice non viene eseguito.

Il JavaScript viene quindi inviato a un nuovo Web Worker. All'interno del worker, i metodi di console vengono sostituiti, in modo che ogni chiamata venga trasformata in testo e inviata alla pagina. Il tuo codice viene racchiuso in una funzione asincrona, che consente di usare await a livello superiore.

La barra di stato sotto l'output mostra In esecuzione mentre il codice viene compilato, eseguito o attende un timer che ha avviato. Un setInterval mantiene l'esecuzione attiva finché non lo cancelli o premi Interrompi. Ogni esecuzione inizia con un worker nuovo, quindi le variabili di un'esecuzione precedente non rimangono mai disponibili.

Suggerimenti

  • I tipi non vengono verificati. Come tsx ed esbuild, lo strumento li rimuove ed esegue il codice, quindi const count: number = "three" viene eseguito senza errori
  • Usa console.log, non un'espressione finale: il valore dell'ultima riga non viene stampato, quindi 1 + 2 da solo non mostra nulla
  • Puoi mantenere nel codice le istruzioni export e le importazioni di soli tipi. L'importazione di un pacchetto non funziona e genera un errore "Impossibile trovare il modulo"
  • Un worker non ha una pagina, quindi document, window e gli altri oggetti DOM non sono disponibili. Usa self per l'ambito globale
  • L'output conserva le 1000 righe più recenti e una singola riga viene troncata dopo 10000 caratteri
  • Esegui solo codice di cui ti fidi, come faresti nella console del browser