TS to JS: как перевести TypeScript в JavaScript

Короткий ответ: ts to js означает скомпилировать TypeScript-файл .ts в JavaScript-файл .js. Самый простой способ — установить TypeScript и выполнить npx tsc file.ts. Для проекта лучше создать tsconfig.json и запускать npx tsc

Один файл

npm install typescript --save-dev

Создайте hello.ts:

const message: string = "Hello from TypeScript";
console.log(message);

Скомпилируйте:

npx tsc hello.ts

Появится hello.js:

var message = "Hello from TypeScript";
console.log(message);

Запуск:

node hello.js

Проект через tsconfig

Для нескольких файлов:

npx tsc --init

Пример:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true
  },
  "include": ["src"]
}

Теперь TypeScript-код лежит в src, а JavaScript появляется в dist

Команды:

npx tsc
node dist/index.js

npm scripts

Чтобы не писать команды вручную:

{
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Рабочий цикл:

npm run check
npm run build
npm run start

check проверяет типы без выпуска .js. build делает настоящий ts to js

Если проект на Vite или React

В frontend-проектах вы можете не видеть отдельный .js рядом с .ts. Сборщик компилирует TypeScript внутри общего build-процесса:

npm run build

Результат обычно попадает в dist как bundle-файлы. Это тоже ts to js, просто не один-к-одному

Быстрый запуск без сохранения JS

Иногда пользователь ищет ts to js, но на самом деле хочет просто запустить .ts. Для разработки можно использовать tsx:

npm install --save-dev tsx
npx tsx src/index.ts

Это не заменяет сборку для публикации, но удобно для скриптов и локальной проверки. Если нужен именно JavaScript-файл на диске, используйте tsc

Настройка target

То, каким получится JavaScript, зависит от target:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

Если поставить старый target, TypeScript будет преобразовывать больше синтаксиса. Если target современный, итоговый JS останется ближе к исходному коду. Для Node.js обычно не нужно без причины компилировать в очень старый JavaScript

Как проверить результат

После компиляции проверьте не только наличие .js, но и запуск:

node dist/index.js

Если код предназначен для браузера, подключайте именно готовый .js, а не .ts:

<script src="./dist/index.js" defer></script>

Если файл есть, но браузер пишет ошибку модулей, проверьте module, type в package.json и способ подключения script

Частые ошибки

Первая ошибка — открыть .ts в браузере напрямую. Браузер выполняет JavaScript, а не TypeScript

Вторая ошибка — включить noEmit: true и ждать .js файл. При noEmit TypeScript только проверяет код

Третья ошибка — не указать outDir, из-за чего .js появляется рядом с .ts

Четвертая ошибка — путать tsc --noEmit и tsc. Первая команда не создает JavaScript

Пятая ошибка — ждать, что TypeScript удалит все runtime-ошибки. После ts to js типы исчезают, поэтому данные из API все равно нужно проверять в runtime

Самопроверка

Создайте src/index.ts, выполните npx tsc, найдите dist/index.js и запустите его через Node. Затем поменяйте тип в .ts, проверьте ошибку через npm run check и только после исправления снова соберите проект

Что почитать дальше по TypeScript

Если нужен общий маршрут по теме, откройте рубрику TypeScript. Для соседних задач пригодятся эти разборы:

• TypeScript и JavaScript: в чем разница простыми словами
• 10 вопросов по TypeScript и ответы на них
• Any, unknown, never и strict
• App.tsx: что это за файл и как добавить TypeScript в React