Hva er en TypeScript-kjører?

TypeScript er JavaScript med typer. Du beskriver formen på dataene dine med grensesnitt og typekommentarer, og TypeScript-kompilatoren gjør koden om til vanlig JavaScript før den kjøres. Å prøve ut noen linjer betyr vanligvis at du må sette opp et prosjekt, en kompilator og en konfigurasjonsfil. En TypeScript-kjører hopper over alt dette. Du skriver koden, kjører den og leser det den skriver ut med console.log.

Verktøybeskrivelse

Dette verktøyet kjører TypeScript i nettleseren din og viser alt koden skriver til konsollen. Skriv eller lim inn kode til venstre og trykk på Kjør, eller trykk Ctrl+Enter (Cmd+Enter på Mac). Resultatet vises til høyre, én linje for hvert console-kall, med advarsler og feil markert med farger. Ingenting kjøres før du ber om det, så du kan redigere fritt.

Koden kompileres av den offisielle TypeScript-kompilatoren og kjører i en Web Worker, som er en bakgrunnstråd i nettleseren din. Derfor vil ikke et skript som aldri avsluttes, fryse siden: trykk på Stopp, så avsluttes det. Koden din sendes ikke til en server.

Eksempler

Beskriv data med et grensesnitt og arbeid med dem:

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

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

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

Resultatet er:

Totalt: 13.5

Bruk en enum og en klasse med parameter-egenskaper:

enum Level {
  Low = "lav",
  High = "høy",
}

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 er:

Skriv tester (høy)

Funksjoner

  • Kjører TypeScript med den offisielle kompilatoren, så all TypeScript-syntaks støttes
  • Støtter enum-er, navnerom, dekoratører, generiske typer og parameter-egenskaper
  • Viser syntaksfeil med linje og kolonne, i samme format som tsc
  • Viser resultatet fra console.log, info, debug, warn og error, med farger for advarsler og feil
  • Formaterer objekter, matriser, maps, sets, klasser, datoer og feil, og håndterer sirkulære referanser
  • Støtter console.group, count, time, assert, dir og clear
  • Kjører asynkron kode, inkludert await på toppnivå, tidtakere og promises
  • Rapporterer feil som ikke er fanget opp, og promise-avvisninger som ikke er håndtert, i resultatet
  • En Stopp-knapp som avslutter et skript umiddelbart, også når det sitter fast i en endeløs løkke
  • Alternativet Behold logger, som er aktivert som standard, beholder resultatet fra tidligere kjøringer slik at du kan sammenligne resultater
  • Hold markøren over en linje i resultatet for å se datoen og klokkeslettet da den ble logget
  • Kopier hele resultatet, tøm det med Tøm-knappen, eller last ned koden som en fil

Slik fungerer det

Når du trykker på Kjør, fjerner TypeScript-kompilatoren typene fra koden og gjør den om til JavaScript. Kompilatoren lastes inn én gang når siden åpnes, så den første kjøringen kan ta litt tid ved en treg tilkobling. Hvis koden har en syntaksfeil, vises feilen, og koden kjøres ikke.

JavaScript-koden sendes deretter til en ny Web Worker. I workeren erstattes console-metodene, slik at hvert kall gjøres om til tekst og sendes tilbake til siden. Koden pakkes inn i en asynkron funksjon, noe som gjør det mulig å bruke await på toppnivå.

Statuslinjen under resultatet viser Kjører mens koden kompileres, kjøres eller venter på en tidtaker den har startet. En setInterval holder kjøringen i gang til du fjerner den eller trykker på Stopp. Hver kjøring starter med en ny worker, så variabler fra en tidligere kjøring blir aldri liggende igjen.

Tips

  • Typer kontrolleres ikke. I likhet med tsx og esbuild fjerner verktøyet typene og kjører koden, så const count: number = "three" kjøres uten feil
  • Bruk console.log, ikke et avsluttende uttrykk: verdien på den siste linjen skrives ikke ut, så 1 + 2 alene viser ingenting
  • Du kan beholde export-setninger og importer som bare inneholder typer, i koden. Det fungerer ikke å importere en pakke, og det mislykkes med feilen «Kan ikke finne modul»
  • En worker har ingen side, så document, window og andre DOM-objekter er ikke tilgjengelige. Bruk self for det globale området
  • Resultatet beholder de nyeste 1000 linjene, og én enkelt linje kuttes etter 10000 tegn
  • Kjør bare kode du stoler på, slik du ville gjort i nettleserkonsollen