Как создать файл tsconfig.json и настроить компиляцию TypeScript?

Question

stack_user26 · 09.05.2026

Как создать файл tsconfig.json и настроить компиляцию TypeScript?

Всем привет! Я только начал изучать TypeScript и столкнулся с проблемой. У меня есть простой файл index.ts, который я хочу скомпилировать в JavaScript: ```typescript // index.ts const greeting: string = "Привет, мир!"; console.log(greeting); function add(a: number, b: number): number { return a + b; } ``` Когда я запускаю `tsc index.ts`, файл компилируется, но я не знаю, как правильно настроить проект. Я слышал, что нужно создать tsconfig.json, но не понимаю, как это сделать и какие настройки там указывать. Мои вопросы: 1. Как вручную создать tsconfig.json? 2. Какие базовые опции нужно указать? 3. Можно ли сгенерировать его автоматически? 4. Почему tsconfig.json важен для TypeScript-проектов? Я использую Visual Studio Code и хочу, чтобы TypeScript автоматически компилировал мои файлы при сохранении. Помогите разобраться с конфигурацией! <<>>

Создание tsconfig.json: пошаговое руководство

Отличный вопрос! tsconfig.json — это центральный файл конфигурации для любого TypeScript-проекта. Он определяет, как компилятор TypeScript (tsc) обрабатывает ваши файлы. Давайте разберем все способы его создания.

1. Автоматическая генерация (рекомендуемый способ)

Самый простой способ — использовать встроенную команду TypeScript:

tsc --init

Эта команда создает tsconfig.json в текущей папке со всеми стандартными настройками и подробными комментариями. После выполнения вы получите примерно такой файл:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. Базовые опции для начинающих

Вот минимальный набор опций, который нужно понимать:

target — версия JavaScript, в которую будет компилироваться код. "es2016" подходит для современных браузеров.
module — система модулей. Для Node.js используйте "commonjs", для фронтенда — "esnext".
strict — включает строгую проверку типов. Настоятельно рекомендую true.
outDir — папка для скомпилированных JS-файлов.
rootDir — корневая папка с исходными TS-файлами.
include/exclude — какие файлы компилировать, а какие игнорировать.

3. Ручное создание

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

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Затем создайте структуру папок:

my-project/
├── src/
│   └── index.ts
├── dist/
└── tsconfig.json

4. Автоматическая компиляция при сохранении

Чтобы TypeScript компилировал файлы автоматически, используйте режим наблюдения:

tsc --watch

Или добавьте в package.json скрипт:

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
  }
}

Теперь при запуске npm run watch компиляция будет происходить автоматически при каждом сохранении файла.

5. Полный пример рабочей конфигурации

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

Эта конфигурация подходит для большинства проектов: включает генерацию файлов декларации (.d.ts), карт исходного кода (source maps) и поддержку JSON-модулей.

Важные советы

Всегда используйте tsc --init для начала — это сэкономит время.
Не удаляйте комментарии из сгенерированного файла — они помогают понять каждую опцию.
Для VS Code установите расширение "TypeScript Hero" или "Pretty TypeScript Errors" для лучшего опыта.
Проверяйте конфигурацию командой tsc --showConfig — она покажет итоговые настройки.

<<>>

Альтернативный подход: использование шаблонов проектов

Если вы не хотите настраивать всё вручную, можно использовать готовые шаблоны. Например, для Node.js проектов отлично подходит ts-node — утилита, которая позволяет запускать TypeScript напрямую без предварительной компиляции:

npm install -g ts-node
ts-node src/index.ts

Для быстрого старта используйте генераторы проектов:

create-typescript-app: npx create-typescript-app my-app
Next.js с TypeScript: npx create-next-app@latest --typescript
Vite: npm create vite@latest my-app -- --template react-ts

Эти инструменты автоматически создадут tsconfig.json с оптимальными настройками для конкретного типа приложения. Вы сможете сразу писать код, а не тратить время на конфигурацию.

Также рекомендую изучить официальную документацию TypeScript по tsconfig.json — там есть подробное описание каждой опции с примерами. Помните, что хорошая конфигурация — залог стабильной работы проекта!

0 ответов