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

kirilljsx

Компиляция

Мы уже знакомы с утилитой tsc из пакета typescript, с ее помощью мы можем создавать файлы конфига.
Но основное ее предназначение это - компиляция TypeScript в JavaScript.

Про добавление TypeScript в проект писал в этой теме.

// script.ts

const user: string = 'User';

console.log(user);

Возьмем наш пример кода выше script.ts и выполним команду:

./node_modules/.bin/tsc script.ts

И теперь рядом с файлом .ts появится файл script.js, который мы можем выполнить как в node.js так и в браузере.

На заметку: Компилятору tsc не требуется указывать параметры — он самостоятельно находит и компилирует все TypeScript-файлы проекта.

О package.json для TS

В отличие от простой команды, которую мы выполнили выше, реальные команды сборки и запуска часто бывают более запутанными и большими.

Чтобы не набирать их каждый раз вручную, их рекомендуется сохранять в разделе scripts файла package.json.

Пример:

// package.json

{
  ...
  "scripts": {
    "build": "tsc src/index.ts --declaration",
    "build:dev": "tsc src/index.ts --sourceMap",
    "watch": "tsc src/index.ts --watch"
  },
  ...
}

Прописав в команды, теперь мы можем выполнять их в консоли npm run build и другие команды.

Василий

У меня в проекте несколько точек входа — нужно ли для каждого файла прописывать отдельную команду в package.json? Или есть способ компилировать все сразу?

Алекс44

А почему в примере компиляции отдельного файла используется прямой вызов tsc, а не через npm script? Это неудобно каждый раз писать полный путь к node_modules.

Ванек

Потому что обычно tsc устанавливают глобально (npm i -g typescript) для простоты использования. Но если работаешь в проекте, лучше использовать npm scripts - так все участники будут использовать одинаковую версию компилятора.

Wowk

Лучше создать tsconfig.json и указать там корневую папку с исходниками. Тогда команда tsc без параметров скомпилирует все файлы. В npm scripts можно просто прописать “build”: “tsc”.

Алекс44

Не могу понять, а в чем разница между флагами --declaration и --sourceMap? Когда какой использовать нужно? В чем тут преимущества?

Ванек

–declaration генерирует .d.ts файлы для типов (нужно для библиотек), а --sourceMap создает карты источников для отладки — связывают скомпилированный JS с исходным TS в devtools.

Василий

Как настроить watch mode для всего проекта, а не одного файла? В примере указан конкретный файл, но у меня их десятки.

Wowk

Достаточно просто запустить tsc --watch (или tsc -w) в корне проекта с tsconfig.json. Компилятор будет отслеживать изменения во всех TypeScript-файлах.

Алекс44

Теперь понял, что лучше использовать tsconfig и npm scripts — это действительно удобнее, чем компилировать каждый файл вручную.