Was ist ein TypeScript-Runner?

TypeScript ist JavaScript mit Typen. Sie beschreiben die Struktur Ihrer Daten mit Interfaces und Typannotationen, und der TypeScript-Compiler wandelt den Code vor der Ausführung in einfaches JavaScript um. Ein paar Zeilen auszuprobieren bedeutet normalerweise, ein Projekt, einen Compiler und eine Konfigurationsdatei einzurichten. Ein TypeScript-Runner erspart Ihnen all das. Sie schreiben den Code, führen ihn aus und lesen, was er mit console.log ausgibt.

Beschreibung des Tools

Dieses Tool führt Ihren TypeScript-Code in Ihrem Browser aus und zeigt alles an, was der Code in die Konsole schreibt. Geben Sie links Code ein oder fügen Sie ihn ein und klicken Sie auf Ausführen oder drücken Sie Strg+Eingabetaste (Befehlstaste+Eingabetaste auf einem Mac). Die Ausgabe erscheint rechts, eine Zeile für jeden console-Aufruf; Warnungen und Fehler werden farblich markiert. Nichts wird ausgeführt, bevor Sie es anfordern, sodass Sie den Code frei bearbeiten können.

Der Code wird vom offiziellen TypeScript-Compiler kompiliert und in einem Web Worker ausgeführt, einem Hintergrund-Thread Ihres Browsers. Daher friert ein Skript, das nie endet, die Seite nicht ein: Klicken Sie auf Stopp, und es wird beendet. Ihr Code wird nicht an einen Server gesendet.

Beispiele

Beschreiben Sie Daten mit einem Interface und arbeiten Sie damit:

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

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

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

Die Ausgabe lautet:

Gesamt: 13.5

Verwenden Sie ein Enum und eine Klasse mit Parametereigenschaften:

enum Level {
  Low = "niedrig",
  High = "hoch",
}

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

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

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

Die Ausgabe lautet:

Tests schreiben (hoch)

Funktionen

  • Führt TypeScript mit dem offiziellen Compiler aus, sodass die gesamte TypeScript-Syntax unterstützt wird
  • Unterstützt Enums, Namespaces, Dekoratoren, Generics und Parametereigenschaften
  • Zeigt Syntaxfehler mit Zeile und Spalte im gleichen Format wie tsc an
  • Zeigt die Ausgabe von console.log, info, debug, warn und error an, mit Farben für Warnungen und Fehler
  • Formatiert Objekte, Arrays, Maps, Sets, Klassen, Datumsangaben und Fehler und verarbeitet zirkuläre Referenzen
  • Unterstützt console.group, count, time, assert, dir und clear
  • Führt asynchronen Code aus, einschließlich await auf der obersten Ebene, Timern und Promises
  • Meldet nicht abgefangene Fehler und nicht behandelte Promise-Ablehnungen in der Ausgabe
  • Eine Stopp-Schaltfläche, die ein Skript sofort beendet, auch wenn es in einer Endlosschleife feststeckt
  • Die standardmäßig aktivierte Option „Protokolle beibehalten“ behält die Ausgabe früherer Ausführungen bei, damit Sie Ergebnisse vergleichen können
  • Bewegen Sie den Mauszeiger über eine Zeile in der Ausgabe, um Datum und Uhrzeit ihrer Protokollierung zu sehen
  • Kopieren Sie die gesamte Ausgabe, löschen Sie sie mit der Schaltfläche „Löschen“ oder laden Sie Ihren Code als Datei herunter

Funktionsweise

Wenn Sie auf Ausführen klicken, entfernt der TypeScript-Compiler die Typen aus Ihrem Code und wandelt ihn in JavaScript um. Der Compiler wird einmal geladen, wenn die Seite geöffnet wird, daher kann die erste Ausführung bei einer langsamen Verbindung etwas dauern. Wenn der Code einen Syntaxfehler enthält, wird der Fehler angezeigt und der Code nicht ausgeführt.

Das JavaScript wird anschließend an einen neuen Web Worker gesendet. Innerhalb des Workers werden die console-Methoden ersetzt, sodass jeder Aufruf in Text umgewandelt und an die Seite zurückgesendet wird. Ihr Code wird in eine asynchrone Funktion eingeschlossen, wodurch await auf der obersten Ebene möglich wird.

Die Statusleiste unter der Ausgabe zeigt „Wird ausgeführt“ an, während Ihr Code kompiliert oder ausgeführt wird oder auf einen von ihm gestarteten Timer wartet. Ein setInterval setzt die Ausführung fort, bis Sie es löschen oder auf Stopp klicken. Jede Ausführung startet mit einem neuen Worker, sodass Variablen aus einer früheren Ausführung niemals zurückbleiben.

Tipps

  • Typen werden nicht überprüft. Wie tsx und esbuild entfernt das Tool die Typen und führt den Code aus, sodass const count: number = "drei" ohne Fehler ausgeführt wird
  • Verwenden Sie console.log statt eines abschließenden Ausdrucks: Der Wert der letzten Zeile wird nicht ausgegeben, daher zeigt 1 + 2 allein nichts an
  • Sie können export-Anweisungen und reine Typ-Imports in Ihrem Code beibehalten. Das Importieren eines Pakets funktioniert nicht und schlägt mit dem Fehler „Modul nicht gefunden“ fehl
  • Ein Worker hat keine Seite, daher sind document, window und andere DOM-Objekte nicht verfügbar. Verwenden Sie self für den globalen Gültigkeitsbereich
  • Die Ausgabe enthält die neuesten 1000 Zeilen, und eine einzelne Zeile wird nach 10000 Zeichen gekürzt
  • Führen Sie nur Code aus, dem Sie vertrauen, wie Sie es auch in der Browserkonsole tun würden