关于前端:现代TypeScript高级教程解读TSConfig

点击在线浏览，体验更好	链接
古代 JavaScript 高级小册	链接
深入浅出 Dart	链接
古代 TypeScript 高级小册	链接

TypeScript 配置文件（tsconfig.json）是用于配置 TypeScript 我的项目的重要文件。它容许开发者自定义 TypeScript 编译器的行为，指定编译选项、文件蕴含与排除规定、输入目录等。通过合理配置 tsconfig.json，咱们能够依据我的项目需要进行灵便的 TypeScript 编译设置。

本文将全面解读 tsconfig.json 的各个配置选项，并提供一些常见的应用场景和示例代码，以及封装定制化本人 tsconfig.base 配置

要应用 TypeScript 配置文件，咱们首先须要创立一个名为 tsconfig.json 的文件，并将其搁置在我的项目的根目录下。

上面是一个根本的 tsconfig.json 配置示例：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

在上述示例中，咱们应用 compilerOptions 配置选项指定了 TypeScript 编译器的选项。其中：

"target": "es6" 指定编译的指标 JavaScript 版本为 ES6。
"module": "commonjs" 指定模块的生成形式为 CommonJS。
"outDir": "dist" 指定输入目录为 “dist”。

同时，咱们应用 include 和 exclude 配置选项别离指定了须要编译的源文件的蕴含规定和排除规定。

compilerOptions 是 tsconfig.json 中最重要的配置选项之一，它容许咱们指定 TypeScript 编译器的各种行为和设置。以下是一些罕用的 compilerOptions 配置选项：

target 选项指定了编译后的 JavaScript 代码所要遵循的 ECMAScript 规范。常见的选项包含 "es5"、"es6"、"es2015"、"es2016" 等。

"compilerOptions": {"target": "es6"}

module 选项用于指定生成的模块化代码的模块零碎。常见的选项包含 "commonjs"、"amd"、"es2015"、"system" 等。

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

outDir 选项指定了编译输入的目录门路。

"compilerOptions": {"outDir": "dist"}

strict 选项用于启用严格的类型检查和更严格的编码标准。

"compilerOptions": {"strict": true}

lib 选项用于指定 TypeScript 编译器能够应用的 JavaScript 规范库的列表。默认状况下，

TypeScript 编译器会依据指标版本主动抉择适合的库。

"compilerOptions": {"lib": ["es6", "dom"]
}

sourceMap 选项用于生成与源代码对应的源映射文件（.map 文件），以便在调试过程中能够将编译后的 JavaScript 代码映射回原始 TypeScript 代码。

"compilerOptions": {"sourceMap": true}

paths 选项用于配置模块解析时的门路映射，能够帮忙咱们简化模块导入的门路。

"compilerOptions": {
  "paths": {"@/*": ["src/*"]
  }
}

allowJs 选项容许在 TypeScript 我的项目中引入 JavaScript 文件，使得咱们能够混合应用 TypeScript 和 JavaScript。

"compilerOptions": {"allowJs": true}

esModuleInterop 属性用于提供对 ES 模块的兼容性反对。当咱们在 TypeScript 我的项目中引入 CommonJS 模块时，能够通过设置 esModuleInterop 为 true 来防止引入时的谬误。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

在下面的示例中，咱们设置了 esModuleInterop 和 allowSyntheticDefaultImports 属性为 true，以反对对 ES 模块的兼容性导入。

更多的 compilerOptions 配置选项能够参考 TypeScript 官网文档：Compiler Options.

include 和 exclude 配置选项用于指定哪些文件应该蕴含在编译过程中，以及哪些文件应该排除在编译过程之外。

include 是一个文件或者文件夹的数组，用于指定须要编译的文件或文件夹的门路模式。

"include": [
  "src/**/*.ts",
  "test/**/*.ts"
]

exclude 是一个文件或者文件夹的数组，用于指定须要排除的文件或文件夹的门路模式。

"exclude": [
  "node_modules",
  "dist"
]

在上述示例中，咱们将 src 文件夹和 test 文件夹下的所有 TypeScript 文件蕴含在编译过程中，并排除了 node_modules 文件夹和 dist 文件夹。

files 配置选项容许咱们显式列出须要编译的文件门路。

"files": [
  "src/main.ts",
  "src/utils.ts"
]

composite 配置选项用于启用 TypeScript 的我的项目援用性能，容许咱们将一个 TypeScript 我的项目作为另一个我的项目的依赖。

"composite": true

declaration 配置选项用于生成申明文件（.d.ts 文件），它们蕴含了编译后 JavaScript 代码的类型信息。

"declaration": true

TypeScript 反对通过 extends 配置选项从其余的 tsconfig.json 文件中继承配置。

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {"outDir": "dist"},
  "include": ["src/**/*.ts"]
}

在上述示例中，咱们通过 extends 指定了一个根底配置文件 tsconfig.base.json，而后在以后的 tsconfig.json 中增加了额定的编译选项和文件蕴含规定。

制化 tsconfig.base 能够让咱们在多个我的项目中共享和复用配置，进步开发效率。上面是一些步骤来封装本人的 TSConfig 为一个库：

首先，咱们须要创立一个新的 TypeScript 我的项目作为咱们的库我的项目。能够应用以下命令初始化一个新的我的项目：

$ mkdir my-tsconfig-lib
$ cd my-tsconfig-lib
$ npm init -y

在我的项目根目录下创立一个名为 tsconfig.json 的文件，并将 TSConfig 的配置内容增加到其中。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

这是一个示例的 TSConfig 配置，你能够依据本人的需要进行相应的批改。

为了可能在其余我的项目中应用咱们的库，咱们须要创立一个入口文件来导出咱们的 TSConfig。

在我的项目根目录下创立一个名为 index.ts 的文件，并增加以下代码：

import * as tsconfig from './tsconfig.json';

export default tsconfig;

在上述代码中，咱们将 tsconfig.json 导入为一个模块，并应用 export default 将其导出。

当初咱们能够应用 TypeScript 编译器将咱们的代码构建为 JavaScript，以便在其余我的项目中应用。

首先，确保你曾经在我的项目中装置了 TypeScript：

$ npm install typescript --save-dev

而后，在 package.json 中增加构建脚本：

{
  "scripts": {"build": "tsc"}
}

最初，运行构建命令进行构建：

$ npm run build

构建实现后，咱们的库文件

将位于 dist 目录下。

要将咱们的 TSConfig 封装为一个库，并使其可供其余我的项目应用，咱们能够将其公布到 NPM。

首先，创立一个 NPM 账号，并登录到 NPM：

$ npm login

而后，在我的项目根目录下运行以下命令公布库：

$ npm publish

公布胜利后，咱们的 TSConfig 库就能够在其余我的项目中应用了。

在其余我的项目中应用咱们的 TSConfig 库非常简单。首先，在指标我的项目中装置咱们的库：

$ npm install my-tsconfig-lib --save-dev

而后，在指标我的项目的 tsconfig.json 文件中应用咱们的 TSConfig：

{"extends": "my-tsconfig-lib"}

通过 extends 配置选项，咱们能够继承和应用咱们的 TSConfig。

通过 tsconfig.json 文件，咱们能够配置 TypeScript 编译器的行为，包含编译选项、文件蕴含与排除规定、输入目录等。合理配置 tsconfig.json 能够帮忙咱们依据我的项目需要进行灵便的 TypeScript 编译设置。

具体的 TypeScript 配置文件的参考信息能够在 TypeScript 官网文档中找到：tsconfig.json

关于前端:现代TypeScript高级教程解读TSConfig

解读 TSConfig

创立和根本配置

compilerOptions

target

module

outDir

strict

lib

sourceMap

paths

allowJs

esModuleInterop 和 allowSyntheticDefaultImports

include 和 exclude

文件援用和 composite

declaration

tsconfig.json 继承

定制化 tsconfig.base

2. 创立 tsconfig.json 文件

3. 创立包入口文件

4. 构建和公布

5. 公布到 NPM

6. 在其余我的项目中应用

总结