tsconfig.json — це файл, який визначає налаштування конфігурації проекту TypeScript. Коли використовується TypeScript, цей файл вказує компілятору TypeScript (tsc), як саме має бути зібраний ваш проект.
У цій статті я поясню основні налаштування у файлі tsconfig.json за категоріями.
1. compilerOptions
Цей ключ містить налаштування, що контролюють поведінку компілятора TypeScript. Ось деякі часто використовувані підпараметри:
target
Визначає, в яку версію ECMAScript має бути перетворено ваш код. Наприклад:
"es5": забезпечує сумісність зі старими браузерами."es6"або вище: надає новіші можливості для сучасних браузерів.
module
Вибір системи модулів JavaScript. Наприклад:
"commonjs": поширений у середовищі Node.js."esnext": підходить для сучасних браузерів і інструментів для збірки (наприклад, Webpack).
lib
Визначає, які API будуть доступні під час компіляції. Наприклад:
"dom": включає API браузера."esnext": включає останні можливості ECMAScript.
importHelpers
Використовує бібліотеку tslib для зменшення розміру допоміжних функцій TypeScript. Це оптимізує розмір коду.
declaration
Дозволяє створювати .d.ts файли разом з скомпільованими JavaScript файлами. Це корисно для повторного використання в інших TypeScript проектах.
sourceMap
Дозволяє створювати карти джерел, що полегшує відладку в браузері.
rootDir
Визначає кореневу директорію для TypeScript вихідних файлів. Наприклад:
"rootDir": "./src"
outDir
Вказує, куди зберігатимуться скомпільовані JavaScript файли. Наприклад:
"outDir": "./dist/esm"
strict
Включає строгий режим перевірки TypeScript. Цей параметр активує всі строгі перевірки, такі як strictNullChecks, strictFunctionTypes тощо.
noImplicitReturns
Змушує функції мати явний return вираз для всіх можливих шляхів коду.
noFallthroughCasesInSwitch
Запобігає відсутності виразу break або інших вихідних виразів в кінці case блоків у switch.
noUnusedLocals і noUnusedParameters
Позначає невикористовувані локальні змінні та параметри функцій як помилки компіляції.
moduleResolution
Визначає стратегію вирішення модулів. Наприклад:
"node": використовує стратегію вирішення модулів Node.js.
jsx
Визначає, як обробляти JSX в проектах React:
"react": перетворює JSX код у класичні виклики функцій React."react-jsx": використовує нову трансформацію JSX для React 17+.
esModuleInterop
Покращує сумісність між ES модулями та модулями CommonJS.
skipLibCheck
Пропускає перевірку .d.ts файлів в залежностях, прискорюючи час компіляції.
forceConsistentCasingInFileNames
Забезпечує чутливість до великої та малої літери в іменах файлів, що дозволяє уникнути проблем з різними операційними системами.
2. include
Вказує, які файли повинні бути включені до компіляції. Наприклад:
"include": ["src"]
Цей параметр дозволяє скомпілювати всі файли в папці src.
3. exclude
Визначає, які файли або папки повинні бути виключені з компіляції. Наприклад:
"exclude": ["node_modules", "dist"]
Цей параметр виключає папки node_modules та dist з процесу компіляції.
4. files
Використовується, коли потрібно компілювати лише вказані файли. Наприклад:
"files": ["src/index.ts"]
У цьому випадку компілюватиметься тільки файл src/index.ts.
5. extends
Використовується для наслідування конфігурації з іншого файлу tsconfig.json. Це полегшує повторне використання налаштувань у великих проектах. Наприклад:
"extends": "../../tsconfig.base.json"
6. references
Використовується для вказівки залежностей проекту.
Це корисно для монорепозиторіїв:
"references": [{ "path": "../shared" }]
Приклад файлу tsconfig.json
{
"compilerOptions": {
"module": "esnext",
"lib": ["dom", "esnext"],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"outDir": "./dist/esm",
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"moduleResolution": "node",
"jsx": "react",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["dist", "node_modules"]
}
Висновок:
Файл tsconfig.json відіграє важливу роль у визначенні того, як буде компілюватися ваш проект TypeScript. З налаштуваннями, що відповідають потребам вашого проекту, ви можете забезпечити кращий досвід розробки та процес компіляції. Правильна конфігурація цього файлу в React проектах дає великі переваги з точки зору продуктивності та якості коду.
Перекладено з: Npm Paketi Oluşturma Serisi — 2: tsconfig.json Dosyası ve Açıklamaları