Учебник по TypeScript

Компилятор TypeScript

Браузеры и Node.js не могут выполнять TypeScript напрямую. Сначала компилятор превращает ваш код на TypeScript в обычный JavaScript.

Примечание: Поскольку TypeScript преобразуется в JavaScript, он работает везде, где работает JavaScript.

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

У TypeScript есть официальный компилятор. Вы устанавливаете его с помощью npm — менеджера пакетов, который поставляется вместе с Node.js.

Примечание: Если npm для вас в новинку, сначала прочитайте краткое введение в npm.

Внутри вашего npm-проекта выполните эту команду, чтобы установить компилятор:

npm install typescript --save-dev

Вы должны увидеть вывод, похожий на этот:

  • added 1 package, and audited 2 packages in 2s
  • found 0 vulnerabilities

Компилятор устанавливается в каталог node_modules. Запустить его можно командой npx tsc.

Эта команда должна вывести примерно следующее:

  • Version 4.5.5
  • tsc: The TypeScript Compiler - Version 4.5.5

Далее следует список всех основных команд.

Глобальная установка

Установка TypeScript глобально добавляет команду tsc в системную переменную PATH, поэтому вы можете использовать её из любой папки.

  • npm install -g typescript
  • tsc -v

Плюсы

  • Быстрый доступ к tsc из любого проекта или каталога.
  • Удобно для проб команд, обучения или разовых скриптов.
  • Некоторые редакторы или инструменты могут найти глобальный компилятор автоматически.

Минусы

  • На разных машинах (или у разных коллег) могут быть разные глобальные версии.
  • Глобальная версия может разойтись с той версией, которую ожидает ваш проект, и это вызывает малозаметные проблемы.
  • В некоторых системах для глобальной установки нужны повышенные права.

Примечание: Лучшая практика — устанавливать TypeScript как devDependency проекта и запускать его командой npx tsc. Так точная версия будет одинаковой в каждом окружении. Глобальная установка необязательна и удобна для быстрого разового использования.

Настройка компилятора

По умолчанию компилятор TypeScript выводит справочное сообщение, если запустить его в пустом проекте.

Компилятор настраивается с помощью файла tsconfig.json.

TypeScript может создать tsconfig.json с рекомендуемыми настройками за вас:

npx tsc --init

Вы должны увидеть вывод, похожий на этот:

  • Created a new tsconfig.json with:
  • target: es2016
  • module: commonjs
  • strict: true
  • esModuleInterop: true
  • skipLibCheck: true
  • forceConsistentCasingInFileNames: true

Подробнее об этом можно узнать в главе о конфигурации TypeScript.

Вот пример дополнительных настроек, которые вы могли бы добавить в tsconfig.json:

  • "include": ["src"]
  • "compilerOptions": { "outDir": "./build" }

Откройте файл в редакторе, чтобы добавить эти параметры.

С такими настройками компилятор берёт файлы TypeScript из каталога src/ вашего проекта и записывает файлы JavaScript в каталог build/.

Ваша первая программа на TypeScript

Давайте напишем простую программу «Hello, World!», чтобы проверить, что ваша настройка TypeScript работает.

  1. Создайте новый файл с именем hello.ts и содержимым, показанным в первом фрагменте ниже.
  2. Скомпилируйте ваш код на TypeScript командой npx tsc hello.ts. Это создаст файл hello.js в том же каталоге (см. второй фрагмент).
  3. Запустите скомпилированный JavaScript командой node hello.js.

Вы должны увидеть вывод Hello, World!.

Примечание: Если вы используете конфигурацию tsconfig.json из примера выше, помещайте файлы TypeScript в каталог src. Скомпилированный JavaScript тогда появится в каталоге build.

hello.ts

Типизированная функция greet, которая строит строку приветствия, и переменная message, выводимая с помощью console.log.

script.ts 
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message: string = greet("World");
console.log(message);

Скомпилированный hello.js

JavaScript, который компилятор генерирует из hello.ts — аннотации типов исчезли, а шаблонная строка превратилась в вызов concat.

script.ts 
function greet(name) {
  return "Hello, ".concat(name, "!");
}

const message = greet("World");
console.log(message);