TypeScript Compiler: как использовать tsc на практике

Короткий ответ: typescript compiler — это компилятор TypeScript, команда tsc. Он берет .ts и .tsx файлы, проверяет типы и выпускает JavaScript. Самый быстрый пример: установите TypeScript, создайте index.ts, выполните npx tsc index.ts и запустите получившийся index.js

Минимальная проверка:

npm install typescript --save-dev
npx tsc --version

Если версия показалась, компилятор доступен

Что делает tsc

TypeScript не является отдельной средой выполнения. Код на TypeScript не исполняется браузером или Node.js напрямую. Компилятор tsc выполняет две главные задачи:

• проверяет типы и показывает ошибки до запуска программы;
• преобразует TypeScript-код в JavaScript.

Например, файл index.ts:

function double(value: number): number {
  return value * 2;
}

console.log(double(5));

Команда:

npx tsc index.ts

создаст index.js:

function double(value) {
    return value * 2;
}
console.log(double(5));

Запуск:

node index.js

Ожидаемый вывод:

10

Проверка ошибок типов

Измените вызов:

console.log(double("5"));

Теперь компилятор должен показать ошибку: строка не подходит туда, где ожидается число. В этом смысл TypeScript compiler: он ловит часть проблем до запуска приложения

Компиляция через tsconfig

Для одного файла можно писать npx tsc index.ts. Для проекта лучше использовать tsconfig.json:

npx tsc --init

Пример настройки:

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

Теперь структура проекта может быть такой:

src/
  index.ts
dist/
  index.js
tsconfig.json

Команда:

npx tsc

прочитает tsconfig.json, возьмет файлы из src и положит JavaScript в dist

Проверить типы без создания JavaScript

Иногда нужно только проверить проект, но не выпускать файлы. Например, это удобно в CI или перед публикацией. Используйте:

npx tsc --noEmit

Эта команда покажет ошибки типов, но не будет создавать .js

В package.json можно добавить:

{
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc"
  }
}

Теперь команды выглядят аккуратно:

npm run check
npm run build

Важные параметры compiler options

target определяет, в какую версию JavaScript компилировать код. Например, ES2020 оставит больше современных возможностей, чем ES5

module задает формат модулей: CommonJS, ES2020, NodeNext и другие варианты. Для Node.js и сборщиков выбор зависит от проекта

strict включает строгую проверку типов. Для обучения и рабочих проектов лучше держать strict: true, потому что TypeScript становится заметно полезнее

outDir говорит, куда класть результат компиляции. Это помогает отделить исходники от собранного JavaScript

rootDir задает корневую папку исходников. Часто это src

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

tsc: command not found означает, что команда не найдена глобально. Если TypeScript установлен локально, запускайте npx tsc или npm-скрипт

No inputs were found in config file появляется, когда include в tsconfig.json не совпадает с реальным расположением файлов. Проверьте, есть ли папка src и .ts-файлы внутри нее

Если JavaScript создается рядом с .ts, а вы хотели папку dist, добавьте outDir

Если TypeScript не показывает ошибку там, где вы ее ждете, проверьте strict. Без строгого режима часть потенциальных проблем может проходить мягче

Если после компиляции Node.js не запускает файл из-за модулей, проблема часто не в TypeScript как таковом, а в сочетании module, type в package.json и версии Node.js

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

Создайте src/index.ts:

type Product = {
  title: string;
  price: number;
};

const product: Product = {
  title: "Курс TypeScript",
  price: 4900,
};

console.log(`${product.title}: ${product.price}`);

Запустите:

npx tsc
node dist/index.js

Потом замените price: 4900 на price: "4900" и выполните npx tsc --noEmit. Компилятор должен поймать ошибку типа

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

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

• Interface и type в TypeScript: когда что использовать
• React и TypeScript: как настроить и использовать в проекте
• Стоит ли использовать TypeScript: честный разбор
• 10 вопросов по TypeScript и ответы на них