10. Конфигурация tsconfig.json

TypeScript: Броня. Урок 3: Конфигурация tsconfig

tsconfig.json – это сердце вашего TypeScript проекта. Он определяет, как компилятор TypeScript будет преобразовывать ваш код в JavaScript. Без него компилятор будет использовать настройки по умолчанию, которые редко подходят для реальных проектов.

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

tsconfig.json - это JSON-файл, содержащий настройки компилятора TypeScript. Он указывает, какие файлы включать в компиляцию, какие правила использовать для проверки типов и как генерировать JavaScript-код. Думайте о нем как о файле конфигурации, который говорит компилятору: “Вот как нужно компилировать этот проект!”.

Основные параметры tsconfig.json

Рассмотрим несколько ключевых параметров:

• compilerOptions: Самый важный раздел. Содержит опции, определяющие поведение компилятора.
• include и exclude: Определяют, какие файлы включать или исключать из компиляции.
• files: Указывает конкретные файлы для компиляции.

Давайте посмотрим на пример:

{
  "compilerOptions": {
    "target": "es5", // Версия JavaScript, в которую компилируется код
    "module": "commonjs", // Система модулей
    "strict": true, // Включает строгий режим проверки типов
    "esModuleInterop": true, // Позволяет импортировать CommonJS модули как ES модули
    "outDir": "./dist", // Директория для сгенерированных JavaScript файлов
    "sourceMap": true // Создает source map файлы для отладки
  },
  "include": ["src/**/*"], // Включает все файлы TypeScript в директории src и поддиректориях
  "exclude": ["node_modules"] // Исключает папку node_modules
}

В этом примере:

• target: "es5" говорит компилятору генерировать JavaScript, совместимый с ES5. Это важно для поддержки старых браузеров.
• module: "commonjs" указывает, что код будет использовать систему модулей CommonJS (используется в Node.js).
• strict: true включает строгий режим, который помогает выявлять ошибки на этапе компиляции.
• outDir: "./dist" указывает, что скомпилированные JavaScript файлы будут помещены в папку dist.
• include: ["src/**/*"] включает все файлы TypeScript в папке src и ее подпапках.
• exclude: ["node_modules"] исключает папку node_modules. Это важно, чтобы не компилировать код из сторонних библиотек.

Практические примеры кода

Предположим, у вас есть следующий TypeScript код:

src/greeter.ts

function greet(name: string) {
  return "Hello, " + name;
}

let user = "Jane User";

console.log(greet(user));

С приведенным выше tsconfig.json, команда tsc (TypeScript Compiler) скомпилирует этот код в dist/greeter.js.

dist/greeter.js

function greet(name) {
    return "Hello, " + name;
}
var user = "Jane User";
console.log(greet(user));
//# sourceMappingURL=greeter.js.map

Обратите внимание на greeter.js.map файл. Он используется для отладки TypeScript кода в браузере.

Жизненный пример

В React проектах, созданных с помощью create-react-app, tsconfig.json уже настроен. Он содержит оптимальные настройки для работы с React и TypeScript. Фреймворки, такие как Angular и Vue.js (через Vue CLI), также генерируют tsconfig.json с настройками по умолчанию, которые можно настроить под свои нужды. Например, можно изменить target, чтобы сгенерировать код, совместимый с более старыми браузерами, или настроить moduleResolution для работы с разными системами модулей.

Ключевые моменты

• tsconfig.json определяет, как компилируется ваш TypeScript проект.
• compilerOptions содержит основные настройки компилятора.
• include и exclude контролируют, какие файлы включаются в компиляцию.
• Правильная настройка tsconfig.json важна для обеспечения правильной компиляции и отладки вашего кода.
• Изучите документацию TypeScript для более детального понимания всех доступных опций.

Интерактивный пример