27 | 配置tsconfig.json（2）：编译选项-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

### 27 | 配置`tsconfig.json`（2）：编译选项

在TypeScript的开发旅程中，`tsconfig.json`文件扮演着至关重要的角色，它作为TypeScript项目的配置文件，定义了项目的编译选项、文件包含与排除规则等。继上一章节对`tsconfig.json`基础结构的介绍后，本章节将深入探讨该文件中最为核心的部分——编译选项（Compiler Options），这些选项直接影响了TypeScript代码如何被编译成JavaScript代码，以及编译过程中的行为表现。

#### 一、编译选项概览

`tsconfig.json`文件中的`compilerOptions`字段是配置编译行为的核心区域，它包含了大量的选项来精确控制TypeScript到JavaScript的转换过程。这些选项大致可以分为几大类：基础编译行为、模块解析与输出、代码检查与风格、环境支持以及其他高级特性。

#### 二、基础编译行为

3. **`outDir`**
   - 类型：`string`
   - 描述：指定编译后文件的存放目录。如果不指定，则默认输出到与`.ts`文件相同的目录下。

4. **`outFile`**
   - 类型：`string`
   - 描述：将多个`.ts`文件合并到一个文件中（需要配合`--module amd`或`--module system`使用）。注意，此选项与`outDir`互斥。

5. **`rootDir`**
   - 类型：`string`
   - 描述：指定输入文件的根目录。编译器将使用此选项来计算`outDir`下的相对路径名，除非显式指定了文件输出。

6. **`strict`**
   - 类型：`boolean`
   - 描述：启用所有严格类型检查选项的快捷方式。当设置为`true`时，会开启`noImplicitAny`、`strictNullChecks`、`strictFunctionTypes`、`strictBindCallApply`、`strictPropertyInitialization`、`noImplicitThis`、`alwaysStrict`等严格检查。

#### 三、模块解析与输出

1. **`moduleResolution`**
   - 类型：`"Node" | "Classic"`
   - 描述：决定模块如何解析。`"Node"`模式（默认值）下，TypeScript会模拟Node.js的模块解析机制；`"Classic"`模式则使用TypeScript的旧解析机制。

2. **`baseUrl`**
   - 类型：`string`
   - 描述：设置解析非相对模块名的基准目录。例如，设置`baseUrl`为`"./src"`后，模块`import foo from "utils/logging"`将解析为`./src/utils/logging`。

3. **`paths`**
   - 类型：`{ [key: string]: string[] }`
   - 描述：模块别名配置。允许将模块请求映射到特定的文件或目录。这对于大型项目中的模块引用优化非常有用。

4. **`esModuleInterop`**
   - 类型：`boolean`
   - 描述：允许从CommonJS模块中导入非ES模块导出的默认值。在默认导出为`exports.default`的CommonJS模块中，此选项允许你像导入ES模块那样导入它们。

#### 四、代码检查与风格

1. **`noImplicitAny`**
   - 类型：`boolean`
   - 描述：当`true`时，如果编译器无法根据上下文推断出类型，则会抛出错误。这有助于避免类型的不明确性。

2. **`strictNullChecks`**
   - 类型：`boolean`
   - 描述：当`true`时，`null`和`undefined`会被视为所有类型的子类型，这意味着你需要显式地处理这两种情况，避免空值错误。

3. **`noUnusedLocals`** 和 **`noUnusedParameters`**
   - 类型：`boolean`
   - 描述：这两个选项分别用于检查未使用的局部变量和函数参数，有助于保持代码的整洁。

4. **`allowJs`**
   - 类型：`boolean`
   - 描述：允许在项目中编译JavaScript文件。这对于逐步迁移现有JavaScript项目到TypeScript非常有用。

5. **`checkJs`**
   - 类型：`boolean`
   - 描述：当与`allowJs`一起使用时，允许对`.js`文件进行类型检查。这有助于在JavaScript代码库中引入类型安全。

#### 五、环境支持

1. **`lib`**
   - 类型：`string[]`
   - 描述：指定要包含在编译中的库文件列表。例如，`"lib": ["es6", "dom"]`会包含ES6和DOM库的类型定义。

2. **`experimentalDecorators`**
   - 类型：`boolean`
   - 描述：允许实验性的装饰器语法。装饰器是TypeScript的一个实验性特性，用于在类、方法、访问器、属性或参数上添加元数据。

3. **`emitDecoratorMetadata`**
   - 类型：`boolean`
   - 描述：当`experimentalDecorators`启用时，此选项将生成与设计时间装饰器相关的元数据。

#### 六、其他高级特性

1. **`sourceMap`**
   - 类型：`boolean`
   - 描述：生成相应的`.map`文件，以便调试TypeScript代码时能够映射回原始源代码。

2. **`downlevelIteration`**
   - 类型：`boolean`
   - 描述：当目标设置为ES3或ES5时，为`for...of`、扩展运算符（`...`）、解构赋值等提供完全支持。

3. **`removeComments`**
   - 类型：`boolean`
   - 描述：在生成的文件中移除注释。有助于减小生成文件的大小。

4. **`importHelpers`**
   - 类型：`boolean`
   - 描述：从`tslib`导入辅助工具函数，如`__extends`、`__rest`等，以减少输出文件的体积。

5. **`incremental`**
   - 类型：`boolean`
   - 描述：启用增量编译。TypeScript会保存编译状态信息，以便在后续编译中重用，提高编译速度。

#### 七、总结

通过`tsconfig.json`文件中的`compilerOptions`，开发者可以精细控制TypeScript的编译过程，确保生成的JavaScript代码既符合项目需求，又具备良好的可读性和可维护性。上述编译选项只是冰山一角，TypeScript提供了丰富的配置选项来满足各种复杂场景的需求。理解并合理运用这些选项，将极大提升TypeScript项目的开发效率和代码质量。在编写和维护`tsconfig.json`时，建议根据项目的实际需求逐步调整和优化配置，以达到最佳的开发体验。

该分类下的相关小册推荐：

剑指TypeScript

TypeScript入门指南

TypeScript 全面进阶指南