Что такое TypeScript runner?

TypeScript - это JavaScript с типами. Вы описываете структуру данных с помощью интерфейсов и аннотаций типов, а компилятор TypeScript преобразует код в обычный JavaScript перед его запуском. Чтобы опробовать несколько строк кода, обычно нужно настроить проект, компилятор и файл конфигурации. TypeScript runner избавляет от всего этого. Вы пишете код, запускаете его и читаете то, что он выводит с помощью console.log.

Описание инструмента

Этот инструмент запускает ваш TypeScript в браузере и показывает всё, что код записывает в консоль. Введите или вставьте код слева и нажмите «Запустить» либо нажмите Ctrl+Enter (Cmd+Enter на Mac). Результат появляется справа: по одной строке для каждого вызова console; предупреждения и ошибки выделяются цветом. Код не запускается, пока вы сами не попросите об этом, поэтому его можно свободно редактировать.

Код компилируется официальным компилятором TypeScript и запускается в Web Worker - фоновой потоке браузера. Поэтому скрипт, который никогда не завершается, не зависнет и не заблокирует страницу: нажмите «Остановить», и он будет завершён. Ваш код не отправляется на сервер.

Примеры

Опишите данные с помощью интерфейса и работайте с ними:

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

const cart: Product[] = [
  { name: "Книга", price: 12 },
  { name: "Ручка", price: 1.5 },
];

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

Результат:

Итого: 13.5

Используйте перечисление и класс со свойствами-параметрами:

enum Level {
  Low = "низкий",
  High = "высокий",
}

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

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

console.log(new Task("Написать тесты", Level.High).describe());
TypeScript

Результат:

Написать тесты (высокий)

Возможности

  • Запускает TypeScript с помощью официального компилятора, поэтому поддерживается весь синтаксис TypeScript
  • Поддерживает перечисления, пространства имён, декораторы, обобщённые типы и свойства-параметры
  • Показывает синтаксические ошибки с указанием строки и столбца в том же формате, что и tsc
  • Показывает результаты вызовов console.log, info, debug, warn и error, выделяя предупреждения и ошибки цветом
  • Форматирует объекты, массивы, карты, множества, классы, даты и ошибки, а также обрабатывает циклические ссылки
  • Поддерживает console.group, count, time, assert, dir и clear
  • Запускает асинхронный код, включая await верхнего уровня, таймеры и промисы
  • Сообщает о необработанных ошибках и отклонённых без обработчика промисах в результате выполнения
  • Кнопка «Остановить» мгновенно завершает скрипт, даже если он застрял в бесконечном цикле
  • Параметр «Сохранять логи», включённый по умолчанию, сохраняет результаты предыдущих запусков, чтобы вы могли сравнивать результаты
  • Наведите указатель на строку в результате, чтобы увидеть дату и время её записи
  • Скопируйте весь результат, очистите его кнопкой «Очистить» или скачайте код в виде файла

Как это работает

Когда вы нажимаете «Запустить», компилятор TypeScript удаляет типы из вашего кода и преобразует его в JavaScript. Компилятор загружается один раз при открытии страницы, поэтому первый запуск при медленном соединении может занять некоторое время. Если в коде есть синтаксическая ошибка, она отображается, а код не запускается.

Затем JavaScript отправляется в новый Web Worker. Внутри воркера методы console заменяются, поэтому каждый вызов преобразуется в текст и отправляется обратно на страницу. Ваш код оборачивается в асинхронную функцию, благодаря чему await можно использовать на верхнем уровне.

Строка состояния под результатом показывает «Выполняется», пока ваш код компилируется, выполняется или ожидает запущенный им таймер. setInterval поддерживает выполнение до тех пор, пока вы не очистите его или не нажмёте «Остановить». Каждый запуск начинается в новом воркере, поэтому переменные из предыдущего запуска никогда не сохраняются.

Советы

  • Типы не проверяются. Как и tsx с esbuild, инструмент удаляет их и запускает код, поэтому const count: number = "three" выполняется без ошибки
  • Используйте console.log, а не отдельное выражение в конце: значение последней строки не выводится, поэтому 1 + 2, записанное само по себе, ничего не показывает
  • В коде можно оставлять операторы export и импорты только типов. Импорт пакета не работает и завершается ошибкой «Модуль не найден»
  • У воркера нет страницы, поэтому document, window и другие объекты DOM недоступны. Используйте self для глобальной области
  • В результате сохраняются последние 1000 строк, а одна строка обрезается после 10000 символов
  • Запускайте только тот код, которому доверяете, как и в консоли браузера