При разработке проектов на TypeScript ключевым элементом является файл конфигурации tsconfig.json. Этот файл определяет параметры компиляции TypeScript для вашего проекта. В этом гайде мы рассмотрим основные настройки tsconfig.json и их влияние на процесс компиляции TypeScript.

Введение в tsconfig.json

Для начала создайте файл tsconfig.json в корневой директории вашего проекта, если он еще не существует. Затем мы можем добавить в него несколько ключевых параметров для настройки проекта под ваши потребности.

Основные параметры:

• compilerOptions: Этот ключ определяет параметры компилятора TypeScript. Здесь вы можете указать такие настройки, как целевая версия ECMAScript, модульная система, выходной формат кода и другие.
• include: С помощью этого параметра вы указываете, какие файлы должны быть включены в процесс компиляции. Это может быть массив шаблонов файлов или директорий.
• exclude: Этот параметр определяет, какие файлы или директории должны быть исключены из процесса компиляции. Обычно сюда включаются папки с тестами, конфигурационные файлы и т. д.
• extends: Позволяет наследовать настройки из другого файла tsconfig.json, что полезно для общих настроек между различными проектами или средами разработки.

Пример базовой конфигурации tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./node_modules"
  ]
}

Это простая конфигурация, которая указывает TypeScript скомпилировать все файлы с расширением .ts из папки src в формате ES6 CommonJS и поместить результаты в папку dist. В следующих частях мы рассмотрим более продвинутые настройки и возможности tsconfig.json.

Дополнительные параметры compilerOptions

В предыдущей части мы рассмотрели базовые параметры tsconfig.json, такие как target, module, outDir и т. д. Однако TypeScript предлагает множество других параметров compilerOptions, которые могут быть полезны при настройке вашего проекта.

Некоторые из дополнительных параметров compilerOptions:

• strict: Данный параметр включает все строгие проверки TypeScript, такие как строгая типизация, проверка null и undefined, строгая проверка преобразований и др. Рекомендуется включать этот параметр для обеспечения более безопасного и надежного кода.
• esModuleInterop: Этот параметр позволяет использовать CommonJS-модули с ES6-импортами без необходимости явного указания дополнительных настроек.
• allowJs: Позволяет компилировать JavaScript файлы в проекте. Это может быть полезно, если вы переходите на TypeScript постепенно или используете сторонние библиотеки, написанные на JavaScript.
• strictNullChecks: Этот параметр включает строгую проверку на null и undefined, что помогает избегать ошибок в коде, связанных с отсутствующими значениями.
• noImplicitAny: Если установлено значение true, TypeScript выдаст ошибку при использовании переменных типа any без явного указания типа.
• declaration: При установке этого параметра TypeScript будет генерировать файлы объявлений .d.ts, которые могут быть использованы другими проектами для поддержки типов исходного кода.

Пример расширенной конфигурации tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "allowJs": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "declaration": true
  },
  "include": [
    "./src/**/*.ts",
    "./lib/**/*.js"
  ],
  "exclude": [
    "./node_modules"
  ]
}

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

Работа с модулями и путями

Модули играют важную роль в организации кода в TypeScript проектах. TypeScript поддерживает различные системы модулей, такие как CommonJS, AMD, UMD, ES6 и другие. В tsconfig.json можно настроить систему модулей и пути к модулям вашего проекта.

Некоторые параметры, связанные с модулями и путями:

• moduleResolution: Этот параметр определяет, как TypeScript разрешает пути к модулям. Значение Node использует алгоритм Node.js для разрешения путей, а значение Classic использует стандартный алгоритм разрешения модулей.
• baseUrl: Указывает базовый каталог, используемый для разрешения набора путей. Позволяет сократить относительные пути к модулям.
• paths: Позволяет создавать псевдонимы для длинных путей к модулям. Это удобно для управления зависимостями и избегания длинных относительных путей.
• rootDirs: Позволяет объединять несколько исходных каталогов в один виртуальный каталог для компиляции.

Пример использования moduleResolution, baseUrl и paths:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@app/*": ["*"]
    }
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./node_modules"
  ]
}

В этом примере мы используем moduleResolution с параметром node, указываем базовый каталог baseUrl как ./src и создаем псевдоним @app/*, который разрешает любой путь из каталога ./src. Это позволяет нам использовать короткие импорты вроде import { something } from ‘@app/module’ вместо длинных относительных путей.

Настройка модулей и путей в tsconfig.json помогает упростить организацию и структурирование вашего кода, делая его более читаемым и поддерживаемым.

Другие важные параметры

В предыдущих частях мы рассмотрели основные и дополнительные параметры tsconfig.json, а также параметры, связанные с модулями и путями. В этой части мы рассмотрим еще несколько важных параметров, которые могут быть полезны при настройке вашего проекта на TypeScript.

Некоторые другие важные параметры:

• strictBindCallApply: При установке в значение true TypeScript будет более строго проверять вызовы методов bind, call и apply.
• noImplicitThis: Если установлено значение true, TypeScript будет выдавать ошибку, когда тип this внутри функции не является явным.
• allowSyntheticDefaultImports: Позволяет использовать import x from ‘module’ вместо import * as x from ‘module’.
• noUnusedLocals и noUnusedParameters: Позволяют выдавать предупреждения или ошибки о неиспользуемых локальных переменных и параметрах функций.
• removeComments: Если установлен в true, TypeScript удаляет все комментарии из генерируемых файлов JavaScript.
• sourceMap: Генерирует файлы source map для облегчения отладки TypeScript кода в браузере или в средах разработки.

Пример использования других параметров:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "sourceMap": true
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./node_modules"
  ]
}

В этом примере мы включаем строгую проверку вызовов методов bind, call и apply, запрещаем неявное использование this, разрешаем синтетические дефолтные импорты и выставляем другие параметры для улучшения производительности и облегчения отладки.

Использование этих параметров в tsconfig.json поможет сделать ваш код более надежным, производительным и удобным для отладки. Не забывайте экспериментировать с параметрами, чтобы настроить их под свои потребности и требования проекта.