Конвертер TypeScript в JavaScript Online

Транспилируйте TypeScript в JavaScript прямо в браузере. Без установки Node.js или tsc. Удобно для изучения TS и обмена кодом.

TypeScript

JavaScript

function greet(user: User) {
  const greeting = "Hello, " + user.name;
  return greeting;
}

const users: User[] = [
  { name: "John", age: 30, active: true },
];

Processed in your browser

Преимущества транспилятора

TypeScript в JavaScript: без установок

Без Node.js и npm

Транспилируйте TypeScript прямо в браузере. Без установки tsc, tsconfig.json и зависимостей.

Официальный компилятор

Используется компилятор TypeScript от Microsoft, скомпилированный в WebAssembly — результат идентичен локальному tsc.

Изучайте TypeScript

Точно поймите, что компилятор генерирует из ваших типов, интерфейсов и дженериков.

Делитесь кодом

Передавайте JavaScript-сниппеты командам или в среды, где TypeScript не настроен.

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

Три шага — никаких сложностей

Вставьте код TypeScript

Вставьте файл .ts: интерфейсы, типы, дженерики, перечисления, декораторы или любые конструкции TypeScript, которые нужно преобразовать в чистый JavaScript.

Мгновенная транспиляция

Официальный компилятор TypeScript (скомпилированный в WebAssembly) удаляет аннотации типов и транспилирует код в ES2015+ JavaScript за миллисекунды.

Скопируйте результирующий JavaScript

Получите эквивалентный JavaScript, готовый для выполнения в браузере или Node.js, а также для передачи командам, которые не используют TypeScript.

FAQ

Остались вопросы?

Какие элементы TypeScript удаляются при конвертации?

Транспилятор удаляет все элементы, характерные исключительно для TypeScript и не имеющие представления в JavaScript: аннотации типов (: string, : number, : boolean, : T[] и т. д.), интерфейсы (interface User {}), псевдонимы типов (type ID = string), дженерики (<T>, <T extends U>), модификаторы доступа (public, private, protected, readonly в классах), перечисления (enum Direction {} преобразуется в объект JavaScript), оператор утверждения типа as, ключевое слово declare для объявлений окружения и экспериментальные декораторы (@Component, @Injectable). Управляющие структуры, функции, классы (их значимая часть), модули import/export и вся логика программы сохраняются без изменений.

Подходит ли результат для продакшена?

Онлайн-транспилятор использует официальный компилятор TypeScript (разработан Microsoft, опубликован как open source в октябре 2012 года, текущая версия 5.x) с параметром target ES2015 или ES2017. Для реального продакшена правильный подход — установить TypeScript через npm install typescript, настроить tsconfig.json с нужной строгостью (strict: true — рекомендуемая практика с TypeScript 2.3) и запустить tsc или использовать сборщики Vite, esbuild, SWC либо webpack с ts-loader. Преимущество онлайн-транспилятора — скорость для исследования, обучения или обмена сниппетами; он не заменяет продакшн-тулчейн с проверкой типов, source maps и оптимизацией бандлов.

Поддерживаются ли декораторы TypeScript?

TypeScript поддерживает две системы декораторов: устаревшие (--experimentalDecorators, доступны с TypeScript 1.5 в 2015 году, используются Angular, NestJS и inversify) и декораторы TC39 Stage 3 (реализованы в TypeScript 5.0, март 2023 года, в соответствии с предложением ECMAScript). Онлайн-транспилятор поддерживает обе системы через соответствующую конфигурацию. Устаревшие декораторы генерируют JavaScript-код с вызовами __decorate() и __metadata(); декораторы TC39 Stage 3 генерируют более чистый код согласно стандартному предложению ECMAScript.

Что происходит с JSX и TSX?

TypeScript поддерживает JSX (синтаксис шаблонов React) через файлы .tsx. Параметр jsx компилятора управляет преобразованием JSX: react (в React.createElement(), классическое поведение), react-jsx (через новый JSX transform React 17+), react-native (без преобразования) и preserve (для обработки другим транспилятором, например Babel). Для проектов React на TypeScript рекомендуется использовать Vite (esbuild для TSX) или CRA/Next.js, которые включают транспиляцию TSX по умолчанию.

Сохраняются ли операторы import и export?

Да. Импорты и экспорты модулей ES6 (import x from 'y', export default, export const) сохраняются по умолчанию, если целевой уровень — ES2015 или выше. TypeScript также удаляет импорты, относящиеся только к типам (import type { User } from './types'), поскольку они не имеют представления во время выполнения. При целевом уровне CommonJS (module: commonjs в tsconfig) импорты/экспорты преобразуются в require()/module.exports — систему модулей Node.js. Для использования в браузере с нативными ES-модулями наиболее подходит цель ES2015 с module: ESNext.

Является ли TypeScript строгим надмножеством JavaScript?

Да. TypeScript был создан Андерсом Хейлсбергом (также проектировавшим C# и Turbo Pascal) в Microsoft и опубликован как open source в октябре 2012 года. Официальное определение: TypeScript — «типизированный JavaScript для масштабных приложений». Любой валидный JavaScript является валидным TypeScript — вы можете переименовать любой файл .js в .ts без изменений. TypeScript добавляет систему типов (аннотации, интерфейсы, дженерики), перечисления, экспериментальные декораторы и ряд функций продвинутых стадий ECMAScript. Компилятор tsc был первым широко принятым современным транспилятором JavaScript — предшественником нынешней экосистемы Babel, esbuild, SWC и Vite.