TypeScript - tsconfig.json: руковод начинающих

Здравствуйте, будущая суперзвезда кодирования! ? Сегодня мы отправимся в увлекательное путешествие в мир TypeScript и его верного помощника, файла tsconfig.json. Не волнуйтесь, если вы еще ни разу не писали строку кода - я буду вашим доброжелательным проводником, и мы справимся с этим вместе, шаг за шагом.

Что такое tsconfig.json?

Прежде чем мы углубимся, давайте поговорим о том, что такое tsconfig.json на самом деле. Представьте, что вы строите дом (ваш проект TypeScript). Файл tsconfig.json подобен чертежу вашего дома. Он tells TypeScript, как вы хотите, чтобы ваш проект был построен, какие функции вы хотите использовать и насколько строгими должны быть правила.

Основная структура файла tsconfig.json

Теперь давайте рассмотрим основную структуру файла tsconfig.json. Он написан в формате JSON, который является способом организации данных, легко понимаемым и людьми, и компьютерами.

Вот простой пример:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Давайте разберем это:

1. Whole file is wrapped in curly braces {}.
2. Inside, we have different sections like compilerOptions, include, and exclude.
3. Each section contains specific settings.

CompilerOptions

Раздел compilerOptions - это место, где happens магия. Это как decir шеф-повару ( компилятор TypeScript), как вы хотите, чтобы он приготовил ваше блюдо (код). Давайте рассмотрим некоторые常见的 параметры:

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

Давайте объясним каждый из этих параметров:

• target: Это tells TypeScript, в какую версию JavaScript он должен компилировать. "es5" поддерживается большинством браузеров.
• module: Это specifies, какую систему модулей использовать. "commonjs" часто используется для проектов Node.js.
• strict: When set to true, он включает了一套 строгих параметров проверки типов.
• outDir: Это место, где TypeScript будет помешать скомпилированные файлы JavaScript.
• rootDir: Это место, где TypeScript должен искать ваши исходные файлы.
• sourceMap: When true, он генерирует файлы source map, которые полезны для отладки.

Include и Exclude

Разделы include и exclude tell TypeScript, какие файлы компилировать, а какие игнорировать:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

• include: Это tells TypeScript компилировать все файлы в папке src и ее подпапках.
• exclude: Это tells TypeScript игнорировать папку node_modules и любые файлы, заканчивающиеся на .spec.ts (обычно используются для тестовых файлов).

Common Scenarios and Configurations

Теперь, когда мы понимаем основы, давайте рассмотрим некоторые распространенные сценарии, с которыми вы можете столкнуться, и как настроить tsconfig.json для них.

Scenario 1: React Project

Если вы работаете над проектом React, вам может понадобиться такая конфигурация:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Эта конфигурация оптимизирована для разработки React. Она позволяет использовать JSX, включает строгую проверку типов и настраивает разрешение модулей для типичной структуры проекта React.

Scenario 2: Node.js Backend Project

Для проекта бэкенда Node.js вы можете использовать такую конфигурацию:

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

Эта конфигурация подходит для проекта бэкенда Node.js. Она компилирует в новейшую версию JavaScript (ES2018), использует модули CommonJS и настраивает входные и выходные директории.

Полезные параметры tsconfig.json

Вот таблица некоторых полезных параметров tsconfig.json, которые вы можете использовать:

Параметр	Описание
noImplicitAny	Вызывает ошибку для выражений и определений с подразумеваемым типом 'any'
strictNullChecks	Включает строгую проверку null
strictFunctionTypes	Включает строгую проверку типов функций
strictBindCallApply	Включает строгие методы 'bind', 'call' и 'apply' для функций
noUnusedLocals	Отчетляет ошибки дляunused локальных переменных
noUnusedParameters	Отчетляет ошибки дляunused параметров
noImplicitReturns	Отчетляет ошибку, когда не все пути кода в функции возвращают значение
noFallthroughCasesInSwitch	Отчетляет ошибки дляpropuskov в switch операторе

Помните, вы всегда можете обратиться к официальной документации TypeScript для полного списка параметров и их описаний.

Заключение

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

Продолжая ваше путешествие в мир TypeScript, не бойтесь экспериментировать с различными конфигурациями. Каждый проект может потребовать略有 отличающуюся настройку, и это нормально! Чем больше вы будете экспериментировать с tsconfig.json, тем комфортнее вы станете с его возможностями.

Продолжайте кодить, продолжайте учиться и, самое главное, получайте удовольствие! До свидания, пусть ваши типы будут сильными, а ошибок мало. Счастливого кодирования! ??‍??‍?

Credits: Image by storyset