Установка TypeScript и компилятор tsc

Ставим компилятор, пишем первый .ts-файл и смотрим, во что он превращается.

tsc (TypeScript Compiler) — программа, которая проверяет типы и переводит код .ts в обычный .js.

Установка

TypeScript ставится через npm. Глобальная установка делает команду tsc доступной в любой папке:

npm install -g typescript

Проверим, что всё встало, и заодно узнаем версию:

tsc --version

Вывод:

Version 5.4.5

На практике TypeScript чаще ставят локально в проект, а не глобально — так у каждого проекта своя версия и сборка воспроизводима у всех в команде:

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

Префикс npx запускает локально установленный tsc из папки node_modules.

Первый файл

Создадим файл hello.ts. Расширение .ts — обязательно: именно по нему компилятор понимает, что внутри TypeScript.

function greet(name: string): string {
  return "Привет, " + name + "!";
}

const message = greet("Мир");
console.log(message);

Здесь name: string — тип параметра, а : string после скобок — тип возвращаемого значения. В обычном JS такого синтаксиса нет.

Компиляция

Запускаем компилятор и указываем файл:

tsc hello.ts

Рядом появится hello.js. Заглянем внутрь — типы пропали, остался чистый JavaScript:

function greet(name) {
  return "Привет, " + name + "!";
}
var message = greet("Мир");
console.log(message);

Именно этот .js и запускается в Node.js или браузере:

node hello.js

Вывод:

Привет, Мир!

Что значит «компиляция нашла ошибку»

Если в коде есть ошибка типов, tsc сообщит о ней и (по умолчанию) всё равно создаст .js, но вы увидите предупреждение. Изменим вызов на неверный:

const message = greet(42); // число вместо строки

Вывод:

hello.ts:6:21 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

Сообщение точно указывает файл, строку и колонку. Это и есть главная польза: ошибка названа до запуска.

Режим наблюдения

Компилировать вручную после каждой правки утомительно. Флаг --watch (или -w) запускает компилятор в фоне — он сам пересобирает файлы при сохранении:

tsc hello.ts --watch

Итог

  • npm install -g typescript ставит компилятор; в проектах предпочитают локальную установку и npx tsc.
  • tsc файл.ts проверяет типы и создаёт рядом .js без типов.
  • Запускается всегда сгенерированный .js; флаг --watch пересобирает автоматически.
Проверьте себя
1. Какая команда установит TypeScript глобально?
Anpm run typescript
Bnpm install -g typescript
Ctsc init typescript
Dnode install typescript
2. Что делает команда tsc hello.ts?
AЗапускает файл hello.ts напрямую
BПроверяет типы и создаёт рядом hello.js
CУстанавливает зависимости проекта
DОткрывает файл в редакторе
3. Зачем нужен флаг --watch у tsc?
AЧтобы скрыть ошибки компиляции
BЧтобы автоматически пересобирать файлы при их сохранении
CЧтобы запустить программу в браузере
DЧтобы удалить старые .js-файлы
Поддержать проект