面向 JavaScript 开发者的 TSConfig 入门-未完纪

JavaScript 不断演进，从简单的脚本语言发展为构建复杂应用的现代工具。为了管理规模更大、更加复杂的代码库，JavaScript 开发者一直在寻找改善工作流程、代码质量和生产力的方法。TypeScript 通过添加类型来改善质量与维护，是一项重要创新，因此它成为增长最快的语言之一并不令人意外。

如果从未使用过编译型语言或编译器，TypeScript 可能让你望而生畏。也可能你用过，却遇到过一个复杂、无法完全理解的 tsconfig.json。这篇文章介绍 TypeScript（TS），以及如何轻松配置项目来使用它。

从 JS 到 TS

TypeScript 构建在 JavaScript 之上，是它的超集：任何有效 JavaScript 都是有效 TypeScript。初学时，可以把它理解为“增强型代码检查器”，它为语言添加新能力，帮助你安全地编写 JavaScript。设计上，它严格采用增量添加：去掉类型后的 TypeScript 就是 JavaScript；保留类型时，则能获得明显改善的工具、调试和整体开发体验。

JavaScript 生态是逐渐自然形成的，TypeScript 因此力求适应现有工具。现代编辑器、构建工具、包管理器、测试框架和 CI/CD 工具，都能与 TypeScript 集成。要采用 TypeScript，并适配项目具体需求和工具，你需要配置 TypeScript 编译器。这可以通过名为 tsconfig.json 的文件完成。

如果在新代码库中首次使用 TypeScript，大多数 tsconfig.json 选项可能保持默认即可。对于需要互操作的工具，或存在特殊情况的项目，这个文件提供了与生态配合所需的各种控制选项。

TSConfig 设置

tsconfig.json 允许配置 TypeScript 编译器处理代码的方式。它就是一个 JSON 对象，各属性定义编译器选项和项目设置。下面介绍设置自己的文件时可能需要的一些属性。

首先看 compilerOptions，编译器设置就在这里指定。

compilerOptions 中的编译器设置

compilerOptions 用于定义 TypeScript 编译器设置，包括以下选项。

target：指定输出 JavaScript 的 ECMAScript 目标版本。原文称其默认值为 ES3。为确保最大兼容性，应设为代码运行所需的最低版本。ESNext 允许目标指向编译器所支持的最新提议特性。

module：定义模块系统，例如 CommonJS、AMD、ES6 等。如何选择取决于项目需求和代码运行环境。大多数现代项目会使用 ES6 或 ESNext。

outDir：指定编译后 JavaScript 文件的输出目录。通常设为 dist，把编译文件放到该目录。

strict：启用严格类型检查选项，帮助捕获代码错误。设为 true 即可开启严格类型检查。

alwaysStrict：启用 strict 时自动为 true。它按 JavaScript 严格模式解析代码，并为每个源文件输出 use strict。

esModuleInterop：JavaScript 主要有 ECMAScript 模块（ESM）和 CommonJS 模块（CJS）两种模块系统，它们的导入导出语法与语义不同。在同时使用 ESM 与 CJS 的 TypeScript 项目中，把该选项设为 true，可让 TypeScript 以兼容两种模块系统的方式处理导入与导出。使用同时涉及 CJS 和 ESM 的第三方库时，原文建议开启此项。

lib：指定类型检查时包含的库。TypeScript 为 JavaScript 内置对象，如 Array、String、Promise，提供类型声明。声明定义这些对象的形状和行为，使 TypeScript 能准确检查类型并提供 IntelliSense 支持。默认会根据项目目标 ECMAScript 版本包含一组标准库声明，例如 dom、es5、es6。也可以通过 lib 自定义，更精确地适配项目环境。例如只面向 Node.js 时，可排除 dom 这类浏览器声明。

sourceMap：生成辅助调试的 .map 文件。源映射把生成的 JavaScript 对应回原 TypeScript 源码，让调试工具能设置断点、检查变量，并像调试原始 TypeScript 一样单步执行。设为 true 开启。

另外一些可能有用的设置：

jsx：使用 JSX，例如 React 时，决定 JSX 文件如何处理，选项包括 preserve、react、react-native 等。

removeComments：从编译后的代码中删除注释；需要压缩编译结果时可能有帮助。

sourceRoot：指定调试器应去哪里查找 TypeScript 文件，以替代源文件原位置。如果运行时源码位置与设计时不同，可使用这个选项。指定位置会嵌入源映射，以引导调试器。

其他 TSConfig 设置

include：指定编译过程应包含的文件路径或 glob 模式数组。只有符合指定模式的文件才会被考虑纳入编译。可以使用 glob，例如 src/**/*.ts，包含指定目录或扩展名的文件。原文说明：未指定 include 时，TypeScript 默认包含项目目录中的全部 .ts、.tsx 和 .d.ts 文件。

exclude：指定编译过程应排除的路径或 glob 模式数组，即便它们符合 include。可忽略不希望编译的文件或目录，例如测试文件、构建产物、第三方库。通常会排除 node_modules 目录。

TSConfig 的其他功能与能力

声明映射：把 declarationMap 设为 true 时，TypeScript 可以在声明文件 .d.ts 旁生成 .d.ts.map。声明映射用途类似源映射，但面向 TypeScript 声明文件。原文将其描述为在生成的声明文件及对应源映射文件之间提供映射，帮助调试并改善工具支持。

监视模式：tsc --watch 监视 TypeScript 文件变化，修改后自动重新编译。它加快开发反馈循环，免去每次手动触发编译。

增量构建：跟踪项目文件及依赖变化，只重新构建自上次编译以来改变的部分，有助于缩短大型项目的编译时间。

覆盖选项：原文称，可以通过 TypeScript 源文件中的注释指令，为单个文件或一组文件覆盖编译器选项。例如用 // @ts-ignore 禁用某些严格检查，或用 // @ts-nocheck 为特定代码部分指定自定义编译器选项。

把 tsconfig.json 作为释放 TypeScript 潜力的入口。理解其用途并使用各项能力，就能更有信心地采用 TypeScript，获得更可靠、高效和愉快的开发体验。

作为起点，可以使用社区维护的 TSConfig 基础配置仓库，为选定运行时找到基础文件，然后只关注项目独有的选择。