Czym jest runner TypeScript?

TypeScript to JavaScript z typami. Kształt danych opisujesz za pomocą interfejsów i adnotacji typów, a kompilator TypeScript zamienia kod na czysty JavaScript, zanim zostanie on uruchomiony. Wypróbowanie kilku wierszy kodu zwykle oznacza skonfigurowanie projektu, kompilatora i pliku konfiguracyjnego. Runner TypeScript pomija to wszystko. Piszesz kod, uruchamiasz go i odczytujesz to, co wypisuje za pomocą console.log.

Opis narzędzia

To narzędzie uruchamia kod TypeScript w przeglądarce i wyświetla wszystko, co kod zapisuje w konsoli. Wpisz lub wklej kod po lewej stronie i naciśnij Uruchom albo użyj skrótu Ctrl+Enter (na komputerze Mac: Cmd+Enter). Dane wyjściowe pojawią się po prawej stronie - po jednym wierszu dla każdego wywołania console, a ostrzeżenia i błędy zostaną oznaczone kolorami. Kod nie uruchomi się, dopóki tego nie zażądasz, więc możesz go swobodnie edytować.

Kod jest kompilowany przez oficjalny kompilator TypeScript i uruchamiany w Web Workerze, czyli wątku działającym w tle przeglądarki. Dzięki temu skrypt, który nigdy się nie kończy, nie zawiesi strony: naciśnij Zatrzymaj, a skrypt zostanie zakończony. Twój kod nie jest wysyłany na serwer.

Przykłady

Opisz dane za pomocą interfejsu i pracuj z nimi:

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

const cart: Product[] = [
  { name: "Książka", price: 12 },
  { name: "Długopis", price: 1.5 },
];

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

Dane wyjściowe:

Suma: 13.5

Użyj enuma i klasy z właściwościami parametrów:

enum Level {
  Low = "niski",
  High = "wysoki",
}

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

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

console.log(new Task("Napisz testy", Level.High).describe());
TypeScript

Dane wyjściowe:

Napisz testy (wysoki)

Funkcje

  • Uruchamia TypeScript za pomocą oficjalnego kompilatora, dzięki czemu obsługiwana jest cała składnia TypeScript
  • Obsługuje enumy, przestrzenie nazw, dekoratory, generyki i właściwości parametrów
  • Wyświetla błędy składni wraz z numerem wiersza i kolumny, w tym samym formacie co tsc
  • Wyświetla dane wyjściowe metod console.log, info, debug, warn i error, używając kolorów dla ostrzeżeń i błędów
  • Formatuje obiekty, tablice, mapy, zbiory, klasy, daty i błędy oraz obsługuje odwołania cykliczne
  • Obsługuje console.group, count, time, assert, dir i clear
  • Uruchamia kod asynchroniczny, w tym await na najwyższym poziomie, timery i promisy
  • Zgłasza nieprzechwycone błędy i nieobsłużone odrzucenia promisów w danych wyjściowych
  • Przycisk Zatrzymaj natychmiast kończy skrypt, nawet jeśli utknął on w nieskończonej pętli
  • Opcja Zachowaj logi, domyślnie włączona, zachowuje dane wyjściowe wcześniejszych uruchomień, aby można było porównywać wyniki
  • Najedź kursorem na wiersz danych wyjściowych, aby zobaczyć datę i godzinę jego zapisania
  • Skopiuj całe dane wyjściowe, wyczyść je przyciskiem Wyczyść albo pobierz kod jako plik

Jak to działa

Po naciśnięciu Uruchom kompilator TypeScript usuwa typy z kodu i zamienia go na JavaScript. Kompilator jest ładowany raz podczas otwierania strony, więc pierwsze uruchomienie może potrwać chwilę przy wolnym połączeniu. Jeśli kod zawiera błąd składni, błąd zostanie wyświetlony, a kod nie zostanie uruchomiony.

Następnie JavaScript jest wysyłany do nowego Web Workera. W workerze metody console są zastępowane, dzięki czemu każde wywołanie jest zamieniane na tekst i odsyłane z powrotem do strony. Kod jest opakowywany w funkcję asynchroniczną, co umożliwia używanie await na najwyższym poziomie.

Pasek stanu pod danymi wyjściowymi pokazuje stan Uruchamianie, gdy kod jest kompilowany, wykonywany lub oczekuje na uruchomiony przez siebie timer. Wywołanie setInterval utrzymuje uruchomienie do momentu jego wyczyszczenia albo naciśnięcia przycisku Zatrzymaj. Każde uruchomienie rozpoczyna się w nowym workerze, więc zmienne z wcześniejszego uruchomienia nigdy nie pozostają dostępne.

Wskazówki

  • Typy nie są sprawdzane. Podobnie jak tsx i esbuild, narzędzie usuwa je i uruchamia kod, więc const count: number = "three" zostanie wykonane bez błędu
  • Używaj console.log, a nie końcowego wyrażenia: wartość ostatniego wiersza nie jest wyświetlana, więc samo 1 + 2 niczego nie pokaże
  • W kodzie możesz pozostawić instrukcje export i importy zawierające wyłącznie typy. Importowanie pakietu nie działa i kończy się błędem „Nie można znaleźć modułu”
  • Worker nie ma strony, dlatego obiekty document, window i inne obiekty DOM nie są dostępne. Użyj self dla zakresu globalnego
  • Dane wyjściowe zachowują 1000 najnowszych wierszy, a pojedynczy wiersz jest obcinany po 10000 znakach
  • Uruchamiaj tylko kod, któremu ufasz, tak jak w konsoli przeglądarki