JavaScript 正在不断发展，从一个简单的脚本语言演变成强大的现代工具，用于构建复杂的应用程序。为了管理越来越大、越来越复杂的代码库，JavaScript 开发人员不断寻找提高工作流程、代码质量和生产力的方法。TypeScript 通过添加类型来改善代码质量和维护，因此毫不奇怪它是增长最快的语言之一。
如果你从未使用过编译语言或编译器，可能会觉得 TypeScript 有点可怕。或许你用过，但遇到了一个复杂的 tsconfig.json 文件，而你并不完全理解。这篇博客文章是对 TypeScript (TS) 的介绍，以及如何轻松地配置你的项目以使用 TypeScript。
从 JS 到 TS
TypeScript 是建立在 JavaScript 之上的。它是一个超集 —— 任何有效的 JavaScript 都是有效的 TypeScript。如果你刚接触 TypeScript，可以简单地将其看作是一个“超级力量的 linter”，为语言增加了新功能，帮助你安全地编写 JavaScript。它旨在严格增加 —— 去掉类型的 TypeScript 就是 JavaScript，但有了类型，你将获得大大改善的工具、调试以及整体开发者体验。
因为 JavaScript 生态系统随着时间的推移而有机地发展，TypeScript 旨在与你现有的工具集成。现代编辑器、构建工具、包管理器、测试框架和 CI/CD 工具都与 TypeScript 集成。为了采纳 TypeScript，并根据你的具体项目要求和工具进行定制，你需要配置 TypeScript 编译器。这可以通过一个叫做 tsconfig.json 的文件来完成。
如果你是第一次在一个新的代码库中做 TypeScript，你可能会将 tsconfig.json 中的大多数选项保留为默认值。对于需要互操作性的工具或有特定怪癖的项目，tsconfig.json 提供了你可能需要拉动的所有操纵杆以与你的生态系统互动。
TSConfig 配置
tsconfig.json 文件允许你配置 TypeScript 编译器如何处理你的 TypeScript 代码。tsconfig.json 文件只是一个具有定义编译器选项和项目设置的属性的 JSON 对象。我们将透过一些你在设置自己的 tsconfig.json 文件时可能需要的属性。
首先要看的属性是 compilerOptions，在此指定编译器设置。
compilerOptions 中的编译器设置
compilerOptions属性是你定义 TypeScript 编译器设置的地方。这些选项包括：target– 指定输出 JavaScript 的 ECMAScript 目标版本。默认为 ES3。为确保最大兼容性，请将其设置为你的代码需要运行的最低版本。ESNext设置允许你针对最新支持的提议特性。module– 定义要使用的模块系统（CommonJS、AMD、ES6等）。使用取决于你项目的需求和代码将运行的环境。大多数现代项目将使用ES6或ESNext。outDir– 指定编译 JavaScript 文件的输出目录。通常设置为dist，为你的编译文件创建一个 dist 目录。strict– 启用严格类型检查选项，以帮助捕获代码中的错误。设置为true进行严格类型检查。alwaysStrict– 如果启用了strict，则自动设置为true，它会在 JavaScript 严格模式下解析代码，并为每个源文件发出use strict。esModuleInterop– 在 JavaScript 中，有两种主要的模块系统：ECMAScript 模块（ESM）和 CommonJS 模块（CJS）。它们对于导入和导出有不同的语法和语义。在使用 ESM 和 CJS 模块的 TypeScript 项目中工作时，将esModuleInterop设置为true可确保 TypeScript 以与两种模块系统都兼容的方式处理导入和导出。如果你正在使用同时使用 CJS 和 ESM 的第三方库，建议这样做。lib– 指定在类型检查时要包含的库。TypeScript 包括了 JavaScript 内置对象（如 Array、String、Promise 等）的类型声明（类型定义）。这些声明定义了这些对象的形状和行为，允许 TypeScript 提供准确的类型检查和 IntelliSense 支持。默认情况下，TypeScript 根据您的项目目标的 ECMAScript 版本，包含了一套标准的库声明（dom、es5、es6等）。但是，您可以使用 “lib” 选项自定义要包含的库，以更精确地匹配您项目的环境。例如，如果您仅面向 Node.js，您可能会排除像dom这样的浏览器特定声明。sourceMap– 生成源映射文件（.map），以帮助调试。源映射文件是将生成的 JavaScript 代码映射回其原始 TypeScript 源代码的文件。在使用调试工具时，源映射允许您设置断点、检查变量，并逐步执行您的 TypeScript 代码，就像您在调试原始 TypeScript 源代码一样。设置为true以启用源映射的使用。
其他可能有用的设置：
jsx– 如果您使用 JSX（例如与 React 一起），此设置决定 您的 JSX 文件应如何被处理（preserve、react、react-native等）。removeComments– 从您编译的代码中去除注释。如果您要压缩编译后的代码，这非常有帮助。sourceRoot– 指定调试器在调试时应该在何处定位 TypeScript 文件，而不是源位置。如果运行时的源文件位置与设计时不同，使用此标志。指定的位置将被嵌入到源映射中，以引导您的调试器。
其他 TSConfig 设置
include– 指定 TypeScript 应该在编译过程中包含的文件路径或 glob 模式的数组。只有匹配指定模式的文件才会被考虑进行编译。您可以使用 glob 模式（如：“src/**/*.ts”）来包括特定目录或特定文件扩展名的文件。如果没有指定 include，TypeScript 默认将项目目录中的所有.ts、.tsx和.d.ts文件纳入编译。exclude– 此设置指定 TypeScript 应该从编译过程中排除的文件路径或通配模式数组（即使它们与include设置中指定的模式匹配）。您可以使用exclude忽略您不想要编译的文件或目录，例如测试文件、构建产物或第三方库。通常您会想要排除您的node_modules文件夹。
TSConfig 的额外功能和能力
声明映射 – 如果在您的 tsconfig.json 中将 declarationMap 设置为 true，TypeScript 可以生成声明映射文件（.d.ts.map）以及声明文件（.d.ts）。声明映射和源映射文件类似，但是特定于 TypeScript 声明文件。这些声明映射提供了生成的声明文件和其对应的源映射文件之间的映射，有助于调试并提供更好的工具支持。
观察模式 – TypeScript 的观察模式 tsc --watch 监控您的 TypeScript 文件的更改，并在它们被修改时自动重新编译。这在开发过程中非常有用，因为它加快了反馈循环并消除了在每次更改后手动触发编译的需要。
增量构建 – TypeScript 的增量构建功能跟踪您项目文件和依赖的更改，允许它只重新构建自上次编译以来已更改的项目部分。这可以提高大型项目的编译时间。
覆盖选项 – 您可以使用 TypeScript 源文件中的注释指令覆盖特定文件或一组文件的特定编译器选项。例如，您可以使用 // @ts-ignore 禁用某些严格检查或者为代码的特定部分指定自定义编译器选项 // @ts-nocheck。
使用您的 tsconfig.json 文件作为一个通道，释放 TypeScript 在您项目中的全部潜力。通过理解其目的并利用它的能力，您可以自信地拥抱 TypeScript，获得更可靠、高效和愉快的开发体验。
为了让您开始，这里有一个由社区拥有的 TSConfig 基础文件的仓库，适用于您选择的运行时环境，然后您只需要关注项目的独特选择。
接下来是什么？
越来越多的开发者使用 TypeScript 来构建更高质量的代码库并且提高生产力。希望这篇文章能够使大家对使用 tsconfig.json 设置新的 TypeScript 项目时有所启发。
不过，如果您有兴趣在不进行任何配置的情况下深入了解 TypeScript，Deno 原生支持 TypeScript。只需创建一个 .ts 文件，编写一些类型定义，然后立即使用 deno run your_file.ts 运行它。
扩展阅读
- [[TypeScript 速查表#|#TSConfig Ref]]