【TypeScript】配置文件编译选项（compilerOptions ）

TypeScript 的编译选项提供了丰富的配置选项，允许开发者控制编译过程的各个方面。以下是主要编译选项的详细介绍，包括每个选项的功能、默认值和使用示例。

1. target

指定编译后的 JavaScript 版本。可选值包括：

• ES3
• ES5
• ES6/ES2015
• ES2016
• ES2017
• ES2018
• ES2019
• ES2020
• ES2021
• ES2022
• ESNext

示例：

{
  "compilerOptions": {
    "target": "ES6"
  }
}

2. module

指定生成代码的模块系统。可选值包括：

• commonjs
• amd
• umd
• es6
• esnext
• system

示例：

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

3. strict

启用所有严格类型检查选项。默认值为 false。如果设置为 true，则以下选项会被启用：

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• strictPropertyInitialization
• useUnknownInCatchVariables

示例：

{
  "compilerOptions": {
    "strict": true
  }
}

4. jsx

指定 JSX 代码的处理方式。可选值包括：

• preserve: 保留 JSX 代码，留给后续处理。
• react: 编译为 React 的 createElement 调用。
• react-jsx: 使用新的 JSX 转换。
• react-jsxdev: 在开发模式下使用新 JSX 转换。

示例：

{
  "compilerOptions": {
    "jsx": "react"
  }
}

5. outDir

指定编译输出目录，所有生成的文件都会放在该目录下。

示例：

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

6. rootDir

指定输入文件的根目录。TypeScript 将根据此目录结构生成相应的输出文件。

示例：

{
  "compilerOptions": {
    "rootDir": "./src"
  }
}

7. sourceMap

生成对应的 .map 文件，以便于调试。设置为 true 后，浏览器可以使用此文件进行源映射。

示例：

{
  "compilerOptions": {
    "sourceMap": true
  }
}

8. allowJs

允许在项目中包含 JavaScript 文件（.js）。这对于逐步迁移项目到 TypeScript 很有用。

示例：

{
  "compilerOptions": {
    "allowJs": true
  }
}

9. skipLibCheck

跳过对所有声明文件（.d.ts）的类型检查，以提高编译速度。

示例：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

10. esModuleInterop

启用对 CommonJS 模块的默认导入支持，使 TypeScript 更好地与其他模块系统兼容。推荐在使用 import 语法时使用。

示例：

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

11. forceConsistentCasingInFileNames

强制文件名在项目中保持一致的大小写。这有助于避免跨平台开发时可能出现的文件名大小写问题。

示例：

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true
  }
}

12. baseUrl

设置基础目录，以便解析非相对模块名。通常与 paths 选项一起使用。

示例：

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

13. paths

设置模块路径映射，允许使用别名导入模块。与 baseUrl 配合使用。

示例：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

14. declaration

生成相应的 .d.ts 声明文件。这在构建库时非常有用。

示例：

{
  "compilerOptions": {
    "declaration": true
  }
}

15. noImplicitAny

当参数或变量没有明确的类型时，禁止隐式 any 类型。启用后，TypeScript 会在未指定类型的情况下报错。

示例：

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

16. strictNullChecks

启用严格的 null 和 undefined 检查。启用后，null 和 undefined 只能被赋值给它们自己或 any。

示例：

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

17. noUnusedLocals

禁止未使用的局部变量。启用后，如果存在未使用的局部变量，编译器会报错。

示例：

{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

18. noUnusedParameters

禁止未使用的函数参数。启用后，如果存在未使用的参数，编译器会报错。

示例：

{
  "compilerOptions": {
    "noUnusedParameters": true
  }
}

19. skipDefaultLibCheck

跳过默认库的类型检查，以提高编译速度。

示例：

{
  "compilerOptions": {
    "skipDefaultLibCheck": true
  }
}

20. typeRoots

指定包含类型定义的目录。通常用于指向 node_modules/@types 以外的目录。

示例：

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./node_modules/@types"]
  }
}

21. lib

指定要包含的标准库文件。这可以覆盖默认库，例如 ES6、DOM 等。

示例：

{
  "compilerOptions": {
    "lib": ["ES6", "DOM"]
  }
}

总结

TypeScript 的编译选项非常丰富，允许开发者根据项目需求进行灵活配置。了解这些选项能够帮助你优化开发流程和提高代码质量。