Компиляция TypeScript: гайд по TSC и TSX

Создайте файл greet.ts со следующим содержимым:

function greet(name: string): string {
  return `Hello, ${name}!`;
}
 
// Ошибка: передаём число вместо строки
console.log(greet(42));

Обратите внимание: функция greet ожидает строку, но мы намеренно передаём число. Именно на этой ошибке хорошо видна разница между инструментами.

Попробуйте запустить этот файл двумя способами — сначала через tsx, затем через tsc — и сравните результат. Обратите внимание, в каком случае TypeScript сообщит об ошибке, а в каком — нет.

Пошаговый разбор

Разберём оба варианта по шагам.

Шаг 1: Устанавливаем TSX

tsx — это утилита, которая запускает .ts-файлы напрямую, без отдельного шага компиляции. Установите её глобально:

npm install -g tsx

Шаг 2: Запускаем файл через TSX

Выполните команду:

tsx greet.ts

Результат в консоли:

Hello, 42!

Файл выполнился без единой ошибки, хотя мы передали число вместо строки. Дело в том, что tsx просто удаляет типы из кода и запускает получившийся JavaScript — полноценной проверки типов при этом не происходит.

Шаг 3: Устанавливаем TSC

tsc — это официальный компилятор TypeScript. Он не только превращает .ts в .js, но и полностью проверяет типы. Установите его как зависимость проекта:

npm install typescript --save-dev

Шаг 4: Компилируем файл через TSC

Запустите компилятор:

npx tsc greet.ts

На этот раз в консоли появится ошибка:

greet.ts:6:19 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
 
6 console.log(greet(42));
                    ~~
 
Found 1 error in greet.ts:6

tsc нашёл именно ту проблему, которую tsx пропустил. Но есть нюанс: несмотря на ошибку, рядом с greet.ts всё равно появится скомпилированный файл greet.js — по умолчанию компилятор эмитит файлы, даже если находит ошибки типов.

Шаг 5: Останавливаем эмит при ошибке

Если вы хотите, чтобы tsc не создавал .js-файл при наличии ошибок, добавьте флаг --noEmitOnError:

npx tsc greet.ts --noEmitOnError

Теперь при ошибке типов файл greet.js создан не будет — компиляция полностью остановится на этапе проверки.

Сведём различия в таблицу:

Проще говоря: tsx — это инструмент для быстрого прототипирования, а tsc — это инструмент, который гарантирует, что ваш код действительно безопасен по типам, прежде чем попадёт в продакшен.

Чтобы убедиться, что вы всё сделали правильно, выполните оба варианта запуска ещё раз:

tsx greet.ts
npx tsc greet.ts --noEmitOnError

Первая команда должна вывести Hello, 42! без ошибок, вторая — сообщить об ошибке типов и не создать greet.js.

Бонус: дополнительные флаги

1. Флаг --watch заставляет tsc следить за файлом и пересобирать его при каждом сохранении — удобно во время разработки.
2. Флаг --noEmit запускает только проверку типов, вообще не создавая файлы — пригодится, если сборкой проекта занимается другой инструмент, например Vite или esbuild.
3. Попробуйте исправить ошибку в greet.ts, заменив 42 на строку, и убедитесь, что оба инструмента теперь выполняются без замечаний.

В этом уроке мы разобрались с двумя ключевыми инструментами TypeScript-разработки:

1. TSX — быстрый запуск .ts-файлов без проверки типов, удобен для итераций и экспериментов.
2. TSC — официальный компилятор, который проверяет типы и превращает TypeScript в JavaScript.
3. Флаг --noEmitOnError не даёт компилятору создавать файлы при наличии ошибок типов.
4. Выбор инструмента зависит от задачи: tsx — для разработки, tsc — для финальной сборки и проверки.

В следующем уроке мы подробнее разберём сам компилятор — как он работает «под капотом» и какие возможности открывает tsconfig.json.