Настройка проекта с TypeScript

Чтобы начать использовать TypeScript, необходимо настроить проект: установить компилятор, создать конфигурационный файл и (при необходимости) интегрировать TypeScript в существующий фреймворк, например React.

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

TypeScript поставляется как пакет npm. Его можно установить глобально или локально в проекте. Рекомендуется устанавливать локально:

npm install --save-dev typescript

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

Конфигурационный файл tsconfig.json

Файл tsconfig.json управляет поведением компилятора TypeScript. Он указывает, какие файлы обрабатывать и как транспилировать код. Создать его можно командой:

npx tsc --init

Эта команда генерирует базовый файл с закомментированными настройками. Основные опции:

  • target — версия JavaScript, в которую будет транспилироваться код (например, "ES2016", "ES2020").
  • outDir — папка, куда будут помещены скомпилированные .js-файлы.
  • strict — включает строгую проверку типов (рекомендуется всегда использовать).

Пример минимального tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

После настройки можно компилировать проект командой:

npx tsc

Использование TypeScript в React-проектах

Для новых проектов на React проще всего использовать шаблоны с поддержкой TypeScript:

  • С Vite: 
    npm create vite@latest my-app -- --template react-ts
  • С Create React App: 
    npx create-react-app my-app --template typescript

Такие шаблоны уже содержат необходимые зависимости (typescript, @types/react, @types/node и др.) и готовый tsconfig.json.

В уже существующем React-проекте можно добавить TypeScript вручную, но это требует установки типов и настройки сборки — поэтому для обучения предпочтительнее начинать с шаблонов.