Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке tsconfig.json?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке `tsconfig.json`

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

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

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

---

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

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

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

---

## 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 має компілювати проєкт:
> які файли брати, які стандарти та модулі використовувати,
> куди складати результат, і які перевірки вмикати.

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати383 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.