Що таке tsconfig.json?

TypeScriptJunior~1 хв читання

Що таке `tsconfig.json`

tsconfig.json - це JSON-файл, який описує, як саме компілятор TypeScript (tsc) має працювати з проєктом.

Приклад мінімального файлу:

javascript

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

Основне завдання

Файл tsconfig.json відповідає за:

Налаштування компіляції (compilerOptions);
Шляхи до вихідних файлів (include / exclude);
Структуру проєкту (references, extends, composite);
Режим строгої типізації;
Вихідні каталоги та формати модулів.

1. Основні секції

`compilerOptions`

Головна секція. Тут вказуються параметри компілятора:

Опція	Опис
`"target"`	У яку версію JS компілювати (ES5, ES6, ES2020, ESNext)
`"module"`	Система модулів (`commonjs`, `esnext`, `amd`)
`"outDir"`	Куди зберігати скомпільовані `.js` файли
`"rootDir"`	Де шукати вихідники (зазвичай `src`)
`"strict"`	Вмикає всі строгі перевірки типів
`"esModuleInterop"`	Спрощує імпорт CommonJS-модулів
`"skipLibCheck"`	Пропускає перевірку типів у залежностях
`"sourceMap"`	Створює `.map` файли для налагодження

Приклад:

javascript

"compilerOptions": {
  "target": "ES2020",
  "module": "ESNext",
  "rootDir": "src",
  "outDir": "dist",
  "strict": true,
  "esModuleInterop": true,
  "sourceMap": true
}

`include` і `exclude`

Вказують, які файли компілювати.

javascript

"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]

Це допомагає уникнути непотрібної компіляції службових файлів.

`extends`

Дозволяє успадковувати налаштування з іншого tsconfig.json. Корисно в монорепозиторії або при розділенні фронтенду і бекенду.

javascript

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "build"
  }
}

Де має знаходитися `tsconfig.json`

Зазвичай - у корені проєкту, поруч із package.json.

Приклад структури:

javascript

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

Так компілятор tsc типово знайде цей файл сам, коли ти просто запускаєш:

javascript

npx tsc

Додатково

Можна мати декілька конфігів

Наприклад, один для розробки, інший для збірки:

javascript

tsconfig.json          // загальний
tsconfig.build.json    // для production

У tsconfig.build.json можна вимкнути карти та тестові файли:

javascript

{
  "extends": "./tsconfig.json",
  "exclude": ["**/*.test.ts", "src/dev-tools"]
}

Підсумок

tsconfig.json - це файл, де ти описуєш, як саме TypeScript має компілювати проєкт: які файли брати, які стандарти та модулі використовувати, куди складати результат, і які перевірки вмикати.

Розташовується в корені проєкту, щоб компілятор автоматично його знайшов.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.