--- theme: vuepress --- 最近在研究 Vue 项目中的 TypeScript 配置，于是去参考了下 element-plus 项目中的 tsconfig 文件。 element-plus 的 Github 仓库： ## 整体架构

粗略地浏览一遍项目，可以发现 element-plus 项目的根目录中一共有 7 份 TypeScript 配置文件，根据名称可以大致猜测其用途： - `tsconfig.json`：入口配置文件。 - `tsconfig.base.json`：所有环境共用的基础配置文件。 - `tsconfig.web.json`：Web 环境下的配置文件。 - `tsconfig.node.json`：Node 环境下的配置文件。 - `tsconfig.vite-config.json`：专用于 `vite.config.ts` 的配置文件。 - `tsconfig.vitest.json`：用于 vitest 测试工具环境下的配置文件。 - `tsconfig.play.json`：用于 Playground 环境的配置。下面将逐一分析上述文件的具体内容。 ## `tsconfig.json` 文件 `tsconfig.json`作为 TypeScript 的入口配置文件，其内容如下： ```json // tsconfig.json { "files": [], "references": [ { "path": "./tsconfig.web.json" }, { "path": "./tsconfig.play.json" }, { "path": "./tsconfig.node.json" }, { "path": "./tsconfig.vite-config.json" }, { "path": "./tsconfig.vitest.json" } ] } ``` 可以看到，`tscofig.json`只做了一件事：使用`references`字段来引入其他 5 份配置文件。 `tsconfig.json`本身则并不包含任何配置。设置`"files": []`选项的原因我猜测是： - 如果没有设置`files`字段，则`include`字段的默认值将会是`**`，即包含项目的所有文件。 - 而前面提到，`tsconfig.json`仅负责引入各个环境下的具体配置文件，本身不负责任何配置。 - 因此需要将`files`字段设置为`[]`，此时`include`的默认值也将为`[]`，这样`tsconfig.json`本身就不会作用于任何文件，也就不会影响到其他配置文件的内容。关于`files`字段对`include`默认值的影响可以参考文档： - 使用`references`字段将项目分割为几个部分单独配置和处理的方式可以参考： - ## `tsconfig.base.json` 文件该文件保存了各配置文件共享的基础配置。它的内容如下： ```json // tsconfig.base.json { "compilerOptions": { "outDir": "dist", // 将编译结果输出到 dist 文件夹中 "target": "es2018", // 将代码编译为 ES9 "module": "esnext", // 使用最新的 ES Module 标准打包代码 "baseUrl": ".", // 设置模块解析的基础路径 "sourceMap": false, // 不生成 sourceMap "moduleResolution": "node", // 使用 node 的模块解析方式 "allowJs": false, // 不允许引入 js 文件 "strict": true, // 开启严格的类型检查 "noUnusedLocals": true, // 对未使用的本地变量进行报错 "resolveJsonModule": true, // 允许使用 import 引入 JSON 文件 "allowSyntheticDefaultImports": true, // 允许使用 import xxx from 'xxx' 的形式引入默认内容，而非必须使用 import * as xxx from 'xxx' 的方式引入 "esModuleInterop": true, // 控制默认内容导入的转译规则 "removeComments": false, // 编译后删除注释内容 "rootDir": ".", // 设置代码的根文件夹，会影响编译结果的目录结构 "types": [], // 不引入任何环境的类型定义 "paths": { "@element-plus/*": ["packages/*"] // 设置路径别名 } } } ``` 可以看到，该文件没有指定作用范围，也没有引入任何环境的类型定义，仅包含了一些构建选项、模块系统和一些基础的类型检查方面的配置。各个字段的作用已在注释中进行了标注，其中只有 `esModuleInterop` 字段的作用自己尚未明确了解，后续将继续进行相关学习。 `esModuleInterop` 字段的文档链接： - ## `tsconfig.web.json` 文件显然，该文件是用于浏览器环境的配置文件，其内容如下： ```json // tsconfig.web.json { "extends": "./tsconfig.base.json", "compilerOptions": { "composite": true, // 使用 references 字段引入的配置文件所必需的字段 "jsx": "preserve", // 保留代码中的 JSX 代码 "lib": ["ES2018", "DOM", "DOM.Iterable"], // 引入 ES 自身和浏览器对象的类型定义 "types": ["unplugin-vue-define-options"], // 引入插件的类型定义 "skipLibCheck": true }, "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"], "exclude": [ "node_modules", "**/dist", "**/__tests__/**/*", "**/gulpfile.ts", "**/test-helper", "packages/test-utils", "**/*.md" ] } ``` ### 关于 `extends` 字段不出预料，该文件继承了 `tsconfig.base.json` 中的配置。 ### 关于 `include` 和 `exclude` 字段可以发现，该配置文件作用于 `packages` 目录下的所有文件，以及 `typings` 目录下的两个类型声明文件。同时，它排除了 `node_modules` 目录，构建结果目录，测试目录等无需类型检查的内容。 ### 关于 `lib` 字段 `lib` 字段用于引入 JS 内置接口和宿主环境（如浏览器，Node 环境等）接口的类型声明。文件中一共引入了 `ES2018`, `DOM` 和 `DOM.Iterable` 三份类型声明： - 其中 `ES2018` 很好理解，表示引入 JS 标准对象的类型声明。 - `DOM` 也较好理解，表示引入 `document` 和 `window` 等浏览器接口的类型声明。 - 而 `DOM.Iterable` 可能较为少见，它包含了 DOM 和 BOM 对象中的遍历方法的类型声明，例如`keys()`,`values()`,`entries()`,`Symbol.iterator` 等等。需要注意的是，`DOM` 选项中并没有包含这些用于遍历的接口的类型声明，它仅提供了功能性接口的类型声明。因此 `DOM` 和 `DOM.iterable` 两个两份类型声明并不重复，建议同时使用。 ### 关于 `types` 字段 `types` 字段用于引入 npm 包中的类型定义。文件中仅在 `types` 字段中引入了 `unplugin-vue-define-options` 这一个包的类型声明。这个包是一款 Vue 插件，用于在 `