Vad är en TypeScript-körmiljö?

TypeScript är JavaScript med typer. Du beskriver formen på dina data med gränssnitt och typannoteringar, och TypeScript-kompilatorn omvandlar koden till vanlig JavaScript innan den körs. Att prova några rader innebär vanligtvis att konfigurera ett projekt, en kompilator och en konfigurationsfil. En TypeScript-körmiljö hoppar över allt detta. Du skriver koden, kör den och läser vad den skriver ut med console.log.

Verktygsbeskrivning

Det här verktyget kör din TypeScript i webbläsaren och visar allt som koden skriver till konsolen. Skriv eller klistra in kod till vänster och tryck på Kör, eller tryck på Ctrl+Enter (Cmd+Enter på Mac). Resultatet visas till höger, en rad för varje console-anrop, med varningar och fel markerade med färg. Ingenting körs förrän du ber om det, så du kan redigera fritt.

Koden kompileras av den officiella TypeScript-kompilatorn och körs i en Web Worker, som är en bakgrundstråd i webbläsaren. Därför fryser inte sidan om ett skript aldrig avslutas: tryck på Stoppa så avslutas det. Din kod skickas inte till någon server.

Exempel

Beskriv data med ett gränssnitt och arbeta med dem:

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

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

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

Resultatet är:

Totalt: 13.5

Använd en enum och en klass med parameter-egenskaper:

enum Level {
  Low = "låg",
  High = "hög",
}

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

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

console.log(new Task("Skriv tester", Level.High).describe());
TypeScript

Resultatet är:

Skriv tester (hög)

Funktioner

  • Kör TypeScript med den officiella kompilatorn, så all TypeScript-syntax stöds
  • Stöder enum, namnrymder, dekoratörer, generics och parameter-egenskaper
  • Visar syntaxfel med rad och kolumn, i samma format som tsc
  • Visar resultatet från console.log, info, debug, warn och error, med färger för varningar och fel
  • Formaterar objekt, arrayer, mappar, mängder, klasser, datum och fel samt hanterar cirkulära referenser
  • Stöder console.group, count, time, assert, dir och clear
  • Kör asynkron kod, inklusive await på toppnivå, timers och promises
  • Rapporterar ouppfångade fel och ohanterade promise-avvisningar i resultatet
  • En Stoppa-knapp som avslutar ett skript direkt, även om det har fastnat i en oändlig loop
  • Alternativet Behåll loggar, aktiverat som standard, behåller resultatet från tidigare körningar så att du kan jämföra resultaten
  • Håll muspekaren över en rad i resultatet för att se datumet och tiden då den loggades
  • Kopiera hela resultatet, rensa det med knappen Rensa eller ladda ner koden som en fil

Så fungerar det

När du trycker på Kör tar TypeScript-kompilatorn bort typerna från koden och omvandlar den till JavaScript. Kompilatorn läses in en gång när sidan öppnas, så den första körningen kan ta en stund vid långsam anslutning. Om koden innehåller ett syntaxfel visas felet och koden körs inte.

JavaScript-koden skickas sedan till en ny Web Worker. I workern ersätts console-metoderna, så varje anrop omvandlas till text och skickas tillbaka till sidan. Din kod omsluts av en asynkron funktion, vilket gör det möjligt att använda await på toppnivå.

Statusfältet under resultatet visar Körs medan koden kompileras, körs eller väntar på en timer som den har startat. En setInterval håller körningen igång tills du rensar den eller trycker på Stoppa. Varje körning startar med en ny worker, så variabler från en tidigare körning lämnas aldrig kvar.

Tips

  • Typer kontrolleras inte. Precis som tsx och esbuild tar verktyget bort dem och kör koden, så const count: number = "tre" körs utan fel
  • Använd console.log, inte ett slututtryck: värdet på den sista raden skrivs inte ut, så 1 + 2 ensamt visar ingenting
  • Du kan behålla export-satser och imports som endast innehåller typer i koden. Det fungerar inte att importera ett paket och körningen misslyckas med felet "Modulen kan inte hittas"
  • En worker har ingen sida, så document, window och andra DOM-objekt är inte tillgängliga. Använd self för det globala omfånget
  • Resultatet behåller de senaste 1000 raderna och en enskild rad kortas av efter 10000 tecken
  • Kör endast kod som du litar på, precis som i webbläsarens konsol