TypeScript Начало работы

Код TypeScript транспилируется (преобразуется) в код JavaScript с помощью специального компилятора.

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

Официальный компилятор TypeScript устанавливается через пакетный менеджер npm.

Чтобы установить компилятор в ваш проект, выполните следующую команду:

npm install typescript --save-dev

Компилятор устанавливается в папку node_modules и запускается командой: npx tsc.

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 выводит справочное сообщение.

Настроить компилятор можно с помощью файла конфигурации tsconfig.json.

Создать файл tsconfig.json с рекомендуемыми настройками можно при помощи команды:

npx tsc --init

Больше информации о настройках конфигурационного файла TypeScript можно найти в соответствующем разделе далее.

Вот пример расширенной настройки файла tsconfig.json:

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

Откройте файл в редакторе, чтобы добавить указанные опции.

Эта настройка заставит компилятор TypeScript транспилировать файлы TypeScript, расположенные в каталоге src вашего проекта, в файлы JavaScript в каталог build.

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

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

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

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

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

Скомпилируйте ваш код TypeScript:

npx tsc hello.ts

Это создаст файл hello.js в той же директории:

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

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

Запустите полученный JavaScript файл:

node hello.js

Вы увидите следующий вывод:

Hello, World!