TypeScript 中的 tsconfig.json

什么是 tsconfig.json？

tsconfig.json 是 TypeScript 编译器的配置文件，用于指导编译器如何编译 TypeScript 代码。在 TypeScript 项目中，如果存在这个文件，那么在执行 tsc 命令时，编译器将会使用该文件中定义的配置选项进行编译。

结构和基本配置选项

让我们先来看一下一个简单的 tsconfig.json 文件的结构及其基本配置选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "*": ["*", "src/*"]
    },
    "allowJs": true,
    "noImplicitAny": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

• compilerOptions：这是一个对象，包含了编译器的各种选项。

  • target：指定编译后的 JavaScript 代码应该符合的 ECMAScript 标准版本。常见的值有 "es5", "es6", "es2015", "es2016" 等。这决定了编译器生成的 JavaScript 代码的语法特性。
  • module：指定生成的模块化代码的模块系统。常见的值有 "commonjs", "amd", "es6", "umd" 等。它决定了编译器如何将 TypeScript 的模块转换为 JavaScript 的模块。
  • outDir：指定编译后的 JavaScript 文件输出目录。编译器会将编译后的 JavaScript 文件输出到指定的目录中。
  • strict：启用严格的类型检查。当启用时，编译器会更严格地检查类型，并发出更多的类型错误。
  • baseUrl：用于解析非相对模块名称的基本目录。它指定了模块名称的基础路径，用于解析模块的导入语句。
  • paths：指定模块的路径映射，用于模块解析。可以为指定的模块名称提供自定义的解析路径。
  • allowJs：允许编译 JavaScript 文件。当启用时，编译器可以编译项目中的 JavaScript 文件。
  • noImplicitAny：在表达式和声明上有隐含的 any 类型时报错。当启用时，编译器会在遇到隐含的 any 类型时发出警告或错误。
  • sourceMap：生成相应的 .map 文件，方便调试。启用后，编译器会生成与编译后的 JavaScript 文件相对应的源映射文件，以便在调试时可以将编译后的 JavaScript 代码映射回原始的 TypeScript 代码。

• include：一个字符串数组，指定需要编译的文件或文件夹的路径模式。编译器会编译匹配这些模式的文件。

• exclude：一个字符串数组，指定不需要编译的文件或文件夹的路径模式。编译器会排除匹配这些模式的文件。

更多常用选项

除了上述基本配置选项外，tsconfig.json 还支持许多其他常用的选项，如下所示：

• esModuleInterop：启用 __importDefault 和 __importStar 来支持 CommonJS 和 AMD 模块之间的互操作性。
• declaration：生成相应的 .d.ts 声明文件。当启用时，编译器会为每个 TypeScript 文件生成一个对应的声明文件。
• strictNullChecks：启用严格的 null 检查。当启用时，编译器会检查是否存在可能为 null 或 undefined 的值，并发出相应的警告或错误。
• noUnusedLocals 和 noUnusedParameters：检测并报告未使用的局部变量和参数。
• jsx：指定 JSX 语法的支持。常见的值有 "preserve", "react", "react-native" 等。
• allowSyntheticDefaultImports：启用允许默认导入来自没有默认导出的模块的内容。

使用 extends 继承配置

有时候，在多个 TypeScript 项目中可能存在相同的配置选项。为了避免重复，可以使用 extends 选项来继承另一个配置文件的配置：

{
  "extends": "./common-tsconfig.json",
  "compilerOptions": {
    "outDir": "./build"
  }
}

通过 extends 选项，可以将当前配置文件继承自另一个配置文件，并在此基础上进行修改或添加额外的配置选项。