Как настроить TypeScript-окружение для работы

Всего нас ждёт пять шагов:

1. Подготовка структуры проекта.
2. Настройка GIT, .gitignore.
3. Установка компилятора и создание конфигурации.
4. Дополнение файла конфигурации.
5. Компиляция и запуск.

Начнём.

Шаг 1. Подготовка структуры проекта

Чтобы развернуть рабочее TypeScript-окружение, нужна пустая директория.

Исходники будут находиться в директории ./src, а результаты компиляции — обычные JavaScript-файлы — будут храниться в ./js.

Шаг 2. Настройка GIT, .gitignore

Мы рекомендуем использовать систему контроля версий.

Настроим git так, чтобы он не хранил результаты компиляции.

git init

Откройте панель команд Ctrl+P и наберите New File. Назовите новый файл .gitignore и впишите в него:

js
node_modules

Шаг 3. Установка компилятора и создание конфигурации

Перед началом установки зависимостей добавим в корень проекта файл package.json и заполним его по умолчанию несколькими опциями:

{
    "name": "typescript",
    "version": "1.0.0",
    "author": "Student from HTMLAcademy"
}

name — название проекта, version — версия проекта, name — имя автора.

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

Для установки компилятора используется менеджер npm:

npm i -D typescript

После выполнения команды в package.json добавится раздел devDependencies, внутри которого появится пакет typescript. Теперь этот пакет может использоваться в проекте.

{
    "name": "typescript",
    "version": "1.0.0",
    "author": "Student from HTMLAcademy",
    "devDependencies": {
        "typescript": "^5.0.4"
    }
}

Можете проверить версию установленного компилятора:

npx tsc -v

Ваша версия, вероятнее всего, будет старше 4.5.

Создадим файл конфигурации проекта, а на следующем шаге внесём в него изменения:

npx tsc --init

Обратите внимание, команда содержит два минуса: --init.

В директории вашего проекта появится файл tsconfig.json. Во-первых, в нём есть комментарии, что не делает его валидным.json-ом, но очень удобно. Во-вторых, некоторые опции уже установлены так, как кажется удобно компилятору.

Отметим, что формат JSON не предусматривает комментариев. TypeScript на них не обращает внимания, так что в файле tsconfig.json при необходимости их можно добавить.

{
   "compilerOptions": {
     "target": "es2016", /*Показывает, в какой вариант JavaScript следует компилировать программу.*/
     "module": "commonjs", /*Устанавливает требуемый формат системы модулей.*/
     "esModuleInterop": true,   /*Требует поддержки со стороны компилятора во время загрузки модулей commonjs в среду es-модулей.*/
     "forceConsistentCasingInFileNames": true, /*Заставляет компилятор следить за регистром букв в именах файлов, если OS (Windows) за этим следить не хочет.*/
     "strict": true,   /*Для нового проекта это единственное оправданное значение флага, иначе зачем тогда TypeScript.*/
     "skipLibCheck": true, /*Просит компилятор не «капризничать» по поводу сторонних библиотек.*/
   }
}

Шаг 4. Дополнение файла конфигурации

Дополним конфигурацию, предложенную TypeScript, нашими соглашениями. В разделе compilerOptions:

+    "rootDir": "./src",
+    "outDir": "./js",

И в корне:

+  "include": ["./src"]

В параметре include мы указали, какие файлы необходимо компилировать. После компиляции итоговые файлы с JavaScript-кодом будут размещены в директории, которая указана в параметре compilerOptions.outDir. Параметр compilerOptions.rootDir нужен, чтобы директории src и js имели одинаковую структуру.

Демо-файлы

Добавим файл main.ts в директорию src и заполним его одной строкой:

document.title = `${new Date().toISOString()} TypeScript compiled`;

Добавим файл index.html в корень нашего проекта, внутри index.html укажем зависимость от скрипта:

<script src="js/main.js"></script>

Обратите внимание, что в браузер следует подгружать JavaScript. Сейчас мы им займёмся.

Шаг 5. Компиляция и запуск

Чтобы получить файл ./js/main.js, нужно скомпилировать исходник ./src/main.ts. У нас всё готово!

npx tsc

В директории с вашим проектом появилась директория ./js с файлом main.js — это результат работы TypeScript.

Теперь можете запустить, например, plugin vs-code live server и убедиться, что во вкладке браузера на странице index.html отображается текущее время.

Дополнительные инструменты

В реальной работе вам может быть полезно настроить сборку webpack или добавить инструменты тестирования. Эти вопросы важны, но выходят за рамки текущей статьи.