Wat is een TypeScript-runner?

TypeScript is JavaScript met types. Je beschrijft de structuur van je gegevens met interfaces en typeannotaties, waarna de TypeScript-compiler de code omzet in gewone JavaScript voordat deze wordt uitgevoerd. Een paar regels uitproberen betekent meestal dat je een project, een compiler en een configuratiebestand moet instellen. Een TypeScript-runner laat dat allemaal achterwege. Je schrijft de code, voert deze uit en leest wat deze afdrukt met console.log.

Beschrijving van de tool

Deze tool voert je TypeScript uit in je browser en toont alles wat de code naar de console schrijft. Typ of plak code aan de linkerkant en druk op Uitvoeren, of druk op Ctrl+Enter (Cmd+Enter op een Mac). De uitvoer verschijnt aan de rechterkant, één regel voor elke aanroep van console, met waarschuwingen en fouten in kleur gemarkeerd. Er wordt niets uitgevoerd totdat je daar opdracht toe geeft, zodat je vrij kunt bewerken.

De code wordt gecompileerd door de officiële TypeScript-compiler en uitgevoerd in een Web Worker, een achtergrondthread van je browser. Daardoor zal een script dat nooit eindigt de pagina niet vast laten lopen: druk op Stop en het wordt beëindigd. Je code wordt niet naar een server verzonden.

Voorbeelden

Beschrijf gegevens met een interface en werk ermee:

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

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

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

De uitvoer is:

Totaal: 13.5

Gebruik een enum en een klasse met parameterproperties:

enum Level {
  Low = "laag",
  High = "hoog",
}

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

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

console.log(new Task("Tests schrijven", Level.High).describe());
TypeScript

De uitvoer is:

Tests schrijven (hoog)

Functies

  • Voert TypeScript uit met de officiële compiler, zodat alle TypeScript-syntaxis wordt ondersteund
  • Ondersteunt enums, namespaces, decorators, generics en parameterproperties
  • Toont syntaxisfouten met hun regel en kolom, in dezelfde indeling als tsc
  • Toont de uitvoer van console.log, info, debug, warn en error, met kleuren voor waarschuwingen en fouten
  • Maakt objecten, arrays, maps, sets, klassen, datums en fouten op een leesbare manier op en verwerkt circulaire verwijzingen
  • Ondersteunt console.group, count, time, assert, dir en clear
  • Voert asynchrone code uit, waaronder await op topniveau, timers en promises
  • Rapporteert niet-opgevangen fouten en niet-afgehandelde promise-afwijzingen in de uitvoer
  • Een Stop-knop die een script onmiddellijk beëindigt, zelfs als het vastzit in een oneindige lus
  • De optie Logboeken behouden, standaard ingeschakeld, bewaart de uitvoer van eerdere uitvoeringen zodat je resultaten kunt vergelijken
  • Beweeg de muis over een regel in de uitvoer om de datum en tijd te zien waarop deze is gelogd
  • Kopieer de volledige uitvoer, wis deze met de knop Wissen of download je code als bestand

Hoe het werkt

Wanneer je op Uitvoeren drukt, verwijdert de TypeScript-compiler de types uit je code en zet deze om in JavaScript. De compiler wordt eenmaal geladen wanneer de pagina wordt geopend, dus de eerste uitvoering kan bij een trage verbinding even duren. Als de code een syntaxisfout bevat, wordt de fout weergegeven en wordt de code niet uitgevoerd.

De JavaScript wordt vervolgens naar een nieuwe Web Worker gestuurd. In de worker worden de methoden van console vervangen, zodat elke aanroep wordt omgezet in tekst en terug naar de pagina wordt gestuurd. Je code wordt verpakt in een asynchrone functie, waardoor await op topniveau mogelijk is.

De statusbalk onder de uitvoer toont Bezig met uitvoeren terwijl je code wordt gecompileerd, uitgevoerd of wacht op een timer die deze heeft gestart. Een setInterval houdt de uitvoering gaande totdat je deze wist of op Stop drukt. Elke uitvoering start met een nieuwe worker, zodat variabelen van een eerdere uitvoering nooit achterblijven.

Tips

  • Types worden niet gecontroleerd. Net als tsx en esbuild verwijdert de tool de types en voert deze de code uit, dus const count: number = "three" wordt zonder fout uitgevoerd
  • Gebruik console.log, niet een laatste expressie: de waarde van de laatste regel wordt niet afgedrukt, dus 1 + 2 op zichzelf toont niets
  • Je kunt export-instructies en imports die alleen types bevatten in je code laten staan. Het importeren van een package werkt niet en mislukt met de foutmelding "Module niet gevonden"
  • Een worker heeft geen pagina, dus document, window en andere DOM-objecten zijn niet beschikbaar. Gebruik self voor de globale scope
  • De uitvoer bewaart de nieuwste 1000 regels en één regel wordt na 10000 tekens afgekapt
  • Voer alleen code uit die je vertrouwt, zoals je dat in de browserconsole zou doen