JavaScript 开发者的 TSConfig 简介
JavaScript 不断发展，从最初的简单脚本语言发展成为构建复杂应用程序的强大现代工具。为了管理更大、更复杂的代码库，JavaScript 开发者一直在寻找改进工作流程、代码质量和生产力的方法。TypeScript 通过添加类型，成为改进代码质量和维护的主要创新，因此它成为增长最快的语言之一也就不足为奇了。
如果您以前从未使用过编译语言或编译器，或者您已经使用过，但遇到了您不完全理解的复杂 tsconfig.json 文件，TypeScript 可能会让您感到害怕。这篇博文是对 TypeScript (TS) 的介绍，以及如何轻松配置您的项目以使用 TypeScript
🚨️ 想要在没有任何配置的情况下编写和运行 TypeScript 吗？ 🚨️
Deno 原生支持 TypeScript。 只需创建一个
.ts文件并运行deno run yourfile.ts即可。
从 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 应从编译过程中排除的文件路径或 glob 模式的数组（即使它们与 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 立即运行它。