18. TypeScript的配置 tsconfig.json_tsconfig.json module

1.为什么需要tsconfig.json

tsconfig.json文件是TypeScript项目的重要组成部分，它定义了项目的根文件和编译器选项。通过这个文件，我们可以控制TypeScript编译器的行为，以满足我们的需求。

2. tsconfig.json文件的基本结构

tsconfig.json是一个JSON文件，tsconfig.json`文件通常位于项目的根目录下，它的文件名是固定的，不能更改。

3. tsconfig.json的主要配置参数

3.1 compilerOptions

compilerOptions可以被用来设置许多编译选项，以下是一些主要的选项：

• target: 这个选项可以用来设置ECMAScript目标版本，比如"ES5"、"ES6"等。例如：

{
  "compilerOptions": {
    "target": "es5" // 编译后的代码将符合ES5标准
  }
}
1
2
3
4
5

• module: 这个选项可以用来指定生成哪个模块系统代码，比如"CommonJS"、“UMD”、“ES6”、“System”、“AMD"或"ES2015”。例如：

{
  "compilerOptions": {
    "module": "commonjs" // 编译后的代码将使用CommonJS模块系统
  }
}
1
2
3
4
5

• lib: 这个选项用来指定要包含在编译中的库文件，比如"dom"、“es5”、“es6”、"es2015.promise"等。例如：

{
  "compilerOptions": {
    "lib": ["dom", "es6"] // 编译过程中将包含"dom"和"es6"库文件
  }
}
1
2
3
4
5

• outDir 和 outFile: outDir选项用来指定输出目录，outFile选项用来指定输出文件。例如：

{
  "compilerOptions": {
    "outDir": "./dist", // 编译后的文件将被输出到"./dist"目录
    "outFile": "./dist/app.js" // 所有输出文件将被合并为一个文件"./dist/app.js"
  }
}
1
2
3
4
5
6

• rootDir 和 baseUrl: rootDir选项用来指定输入文件的根目录，baseUrl选项用来指定非相对模块名的基准目录。例如：

{
  "compilerOptions": {
    "rootDir": "./src", // 指定"./src"为源文件的根目录
    "baseUrl": "./src" // 指定"./src"为非相对模块名的基准目录
  }
}
1
2
3
4
5
6

• strict: 这个选项可以启用所有严格类型检查选项。例如：

{
  "compilerOptions": {
    "strict": true // 启用所有严格类型检查选项
  }
}
1
2
3
4
5

• esModuleInterop: 这个选项可以启用ES模块和CommonJS模块之间的互操作性。例如：

{
  "compilerOptions": {
    "esModuleInterop": true // 启用ES模块和CommonJS模块之间的互操作性
  }
}
1
2
3
4
5

• experimentalDecorators: 这个选项可以启用实验性的装饰器支持。例如：

{
  "compilerOptions": {
    "experimentalDecorators": true // 启用实验性的装饰器支持
  }
}
1
2
3
4
5

• allowJs 和 checkJs: allowJs选项可以允许编译JavaScript文件，checkJs选项可以报告JavaScript文件中的错误。例如：

{
  "compilerOptions": {
    "allowJs": true, // 允许编译JavaScript文件
    "checkJs": true // 报告JavaScript文件中的错误
  }
}
1
2
3
4
5
6

3.2 include 和 exclude

include和exclude选项可以用来指定编译的文件或目录，以及不编译的文件或目录。例如：

{
  "include": ["src/**/*"], // 只编译"src"目录下的文件
  "exclude": ["node_modules"] // 不编译"node_modules"目录下的文件
}
1
2
3
4

以上就是tsconfig.json文件的主要配置参数的详细介绍和代码示例，希望对你有所帮助！

​

好的，接下来我们继续探讨tsconfig.json的其他配置参数。

3.3 extends

extends选项可以用来继承其他的tsconfig.json文件。这是一种非常有用的功能，可以帮助我们避免在多个tsconfig.json文件中重复相同的配置。例如：

{
  "extends": "./base-config.json", // 继承"./base-config.json"文件中的配置
  "compilerOptions": {
    // 这里可以覆盖继承的配置
  }
}
1
2
3
4
5
6

3.4 files 和 references

files选项可以用来在项目中包含的文件列表，references选项可以用来设置项目引用。例如：

{
  "files": [
    "core.ts", // 包含"core.ts"文件
    "sys.ts" // 包含"sys.ts"文件
  ],
  "references": [
    { "path": "./src" } // 设置对"./src"项目的引用
  ]
}
1
2
3
4
5
6
7
8
9

4. 其它

我们可以使用include和exclude选项来控制哪些文件被编译，使用compilerOptions选项来设置编译选项，使用extends选项来继承其他的配置文件。
tsconfig.json文件是TypeScript项目的重要组成部分，它可以帮助我们更好地管理和组织我们的项目。通过合理地配置tsconfig.json`文件，我们可以提高我们的开发效率，减少错误，提高代码的质量。