Как пользоваться онлайн-компилятором TypeScript
- Напишите или вставьте код TypeScript в редактор или начните с примера (кнопка Сбросить пример возвращает его).
- Нажмите Запустить или используйте Ctrl + Enter (⌘ + Enter на Mac).
- Ваш код компилируется в JavaScript. Если компилятор находит синтаксическую ошибку, она выводится с кодом ошибки
TS, строкой и столбцом, и ничего не запускается. - Если компиляция прошла успешно, JavaScript выполняется. Вывод
console.logпоявляется на панели Результат, а под редактором можно открыть Сгенерированный JavaScript, чтобы увидеть, что именно создал компилятор. - Выберите ограничение времени в 5, 15 или 60 секунд либо нажмите Остановить, чтобы завершить запуск досрочно.
При первом запуске страница скачивает официальный компилятор TypeScript, около 3 МБ. Браузер кеширует его, поэтому последующие запуски начинаются быстро.
И компиляция, и выполнение происходят в Web Worker в вашем браузере. Ваш код не загружается и не хранится на наших серверах. Редактор сохраняет ваш последний код в локальном хранилище браузера и больше нигде.
Что поддерживается
Эта страница использует TypeScript 5.6, официальный компилятор Microsoft. Целевая версия — ES2022, а результат выполняется в движке JavaScript вашего браузера.
- Весь синтаксис TypeScript: аннотации типов, интерфейсы, псевдонимы типов, обобщения (generics), объединения и пересечения типов, перечисления (enum), модификаторы доступа,
satisfies,as constи многое другое. - Современный JavaScript на выходе: классы, async/await и опциональная цепочка остаются без изменений.
awaitна верхнем уровне, таймеры и промисы — так же, как в онлайн-компиляторе JavaScript.
Ограничения:
- Только транспиляция. Компилятор удаляет типы и сообщает о синтаксических ошибках, но не выполняет полную проверку типов. Код вроде
const n: number = "text"компилируется и выполняется. Когда нужны семантические ошибки типов, используйтеtsc --noEmitили ваш редактор. - Нет DOM: код выполняется в воркере, поэтому
documentиwindowнедоступны. - Нет импортов: пакеты npm, инструкции
importи API Node.js использовать нельзя.
Краткий справочник по TypeScript
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Понятие | Синтаксис |
|---|---|
| Переменная с типом | let count: number = 0; |
| Интерфейс | interface User { id: number; name?: string } |
| Тип-объединение | type Id = string | number; |
| Обобщённая функция | function wrap<T>(v: T): T[] { return [v]; } |
| Массив только для чтения | const xs: readonly number[] = [1, 2]; |
| Перечисление | enum Dir { Up, Down } |
Советы
- Откройте Сгенерированный JavaScript, чтобы узнать, как компилируются такие возможности, как перечисления, свойства параметров и поля классов. Это быстрый способ понять, что TypeScript делает во время выполнения.
- Помните, что типы исчезают во время выполнения. Чтобы проверять данные извне (например, разобранный JSON), пишите проверки времени выполнения или защитники типов (type guards), такие как
function isUser(x: unknown): x is User. - Нужно привести вывод в порядок, прежде чем копировать его в проект? Вставьте его в форматирование и минификацию JavaScript.
TS1005: ';' expected означает, что код не удалось разобрать. Исправьте код в строке и столбце, указанных в выводе, и запустите снова.Часто задаваемые вопросы
Проверяет ли этот инструмент мои типы?
Нет. Он использует режим транспиляции компилятора, который сообщает только о синтаксических ошибках. Это делает его быстрым и лёгким, но несоответствия типов не выявляются. Для полной проверки запускайте tsc локально или используйте редактор со службой языка TypeScript.
Чем TypeScript отличается от JavaScript?
TypeScript — это JavaScript с необязательной статической типизацией. Браузеры не могут выполнять TypeScript напрямую, поэтому сначала он компилируется в обычный JavaScript: типы удаляются, а несколько возможностей, существующих только в TypeScript, например перечисления, заменяются более простыми конструкциями. Результат этого шага можно увидеть на этой странице.
Какая версия TypeScript используется?
TypeScript 5.6, целевая версия вывода — ES2022.
Можно ли импортировать библиотеки?
Нет. При каждом запуске компилируется и выполняется один файл без разрешения модулей, поэтому инструкции import и пакеты npm не поддерживаются. Другие полезные утилиты смотрите среди всех наших инструментов разработчика.
Обновлено