Контекст компиляции

Контекст компиляции - это причудливый термин, используемый для группировки файлов и указания TypeScript, какие файлы являются действительными, а какие - недействительными. Также контекст компиляции включает в себя информацию о том какие параметры компиляции используются. Лучший способ определить логическую группировку - использовать файл tsconfig.json.

tsconfig.json

Базовый

Начать работу с tsconfig.json относительно просто, вам просто нужно написать:

{}

Например, создайте пустой файл json в корневом каталоге вашего проекта. Таким образом, TypeScript будет обрабатывать все файлы .ts в этом каталоге (и подкаталогах) как часть контекста компиляции, а также будет включать некоторые параметры компиляции по умолчанию.

Параметры компиляции

Вы можете настроить параметры компиляции с помощью compilerOptions:

{
  "compilerOptions": {

    /* Основные варианты */
    "target": "es5",                       // Укажите версию ECMAScript: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",                  // Укажите модуль генерации кода: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],                             // Укажите файлы библиотеки для включения в компиляцию
    "allowJs": true,                       // Разрешить компиляцию файлов javascript
    "checkJs": true,                       // Сообщить об ошибках в файлах javascript
    "jsx": "preserve",                     // Укажите генерацию JSX кода: 'preserve', 'react-native', or 'react'
    "declaration": true,                   // Создает соответствующий файл '.d.ts'
    "sourceMap": true,                     // Создайте соответствующий файл '.map'
    "outFile": "./",                       // Объединить выходные файлы в один файл
    "outDir": "./",                        // Укажите выходной каталог
    "rootDir": "./",                       // Укажите корневой каталог входных файлов. Используйте для управления структурой выходного каталога с помощью --outDir.
    "removeComments": true,                // Удалить все комментарии после компиляции
    "noEmit": true,                        // Не генерирует выходные файлы
    "importHelpers": true,                 // Импорт вспомогательных функций из tslib
    "isolatedModules": true,               // Сделайте каждый файл отдельным модулем (аналогично ts.transpileModule)

    /* Строгие проверки типов */
    "strict": true,                        // Включить все параметры строгой проверки типов
    "noImplicitAny": true,                 // Выдает ошибку в выражениях и объявлениях при неявным типом 'any'
    "strictNullChecks": true,              // Включить строгую проверку на null
    "noImplicitThis": true,                // Выдает ошибку когда 'this' объявлено как 'any'
    "alwaysStrict": true,                  // Проверяет каждый модуль в строгом режиме и добавляет 'use strict' в каждый файл

    /* Дополнительная проверка */
    "noUnusedLocals": true,                // Выдает ошибку, когда есть неиспользуемые переменные
    "noUnusedParameters": true,            // Выдает ошибку, когда есть неиспользуемые параметры
    "noImplicitReturns": true,             // Когда не все варианты кода в функции имеют возвращаемое значение, выдается ошибка
    "noFallthroughCasesInSwitch": true,    // Сообщить об ошибках для случайных случаев в операторе switch

    /* Параметры разбора модуля */
    "moduleResolution": "node",            // Выберите стратегию разрешения модуля： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",                       // Базовый каталог для разрешения не абсолютных имен модулей
    "paths": {},                           // Список отображений имени модуля на основе baseUrl
    "rootDirs": [],                        // Список корневых папок, объединенное содержимое которых представляет собой структурное содержимое проекта во время выполнения
    "typeRoots": [],                       // Список файлов, содержащих объявления типов
    "types": [],                           // Файлы объявлений типов для включения в компиляцию
    "allowSyntheticDefaultImports": true,  // Разрешить импорт по умолчанию из модулей, для которых не установлен экспорт по умолчанию

    /* Source Map Параметры */
    "sourceRoot": "./",                    // Укажите, где отладчик должен находить файлы TypeScript вместо исходных файлов.
    "mapRoot": "./",                       // Укажите место, где отладчик должен находить файлы Source Map вместо сгенерированных
    "inlineSourceMap": true,               // Создайте один файл 'soucemaps' вместо разных
    "inlineSources": true,                 // Сгенерируйте код и 'soucemaps' в один файл, требуя установки обоих свойств --inlineSourceMap или --sourceMap

    /* Другие параметры */
    "experimentalDecorators": true,        // Включить декораторы
    "emitDecoratorMetadata": true          // Поддержка метаданных для декораторов
  }
}

Эти (и другие) параметры компиляции будут обсуждаться позже.

TypeScript компилятор

Хорошая IDE поддерживает своевременную компиляцию TypeScript. Однако, если вы хотите запустить компилятор TypeScript вручную из командной строки при использовании tsconfig.json, вы можете сделать это:

• Запустите tsc, он будет искать файл tsconfig.json в текущем каталоге или в родительском каталоге

• Запустите tsc -p ./path-to-project-directory. Естественно этот путь может быть абсолютным или относительным к текущему каталогу.

Вы даже можете использовать tsc -w, чтобы включить режим наблюдения компилятора TypeScript, который будет перекомпилирован после обнаружения изменений файла.

Какие файлы?

Вы можете явно указать файлы, которые должны быть скомпилированы:

{
  "files": [
    "./some/file.ts"
  ]
}

Также вы можете использовать опции include и exclude, чтобы указать, какие файлы включать и какие файлы исключать:

{
  "include": [
    "./folder"
  ],
  "exclude": [
    "./folder/**/*.spec.ts",
    "./folder/someSubFolder"
  ]
}

Обратите внимание

Использование globs: **/* (пример использования some/folder/**/* ) означает сопоставление всех папок и всех файлов (с расширением .ts / .tsx, когда включена опция allowJs: true, Расширение может быть .js / .jsx).