JavaScript 开发者 TSConfig 简介
JavaScript 不断发展，从简单的脚本语言演变为构建复杂应用程序的强大现代工具。为了管理更大、更复杂的代码库，JavaScript 开发者一直在寻找改进工作流程、代码质量和生产力的方法。TypeScript 通过添加类型，在提高代码质量和可维护性方面取得了重大创新，因此它成为增长最快的语言之一也就不足为奇了。
如果您从未用过编译型语言或编译器，TypeScript 可能会让您感到害怕。或者您可能用过，并且遇到了一个您不完全理解的复杂 tsconfig.json 文件。这篇博客文章旨在介绍 TypeScript (TS) 以及如何轻松配置您的项目以使用 TypeScript
🚨️ 想要无需任何配置即可编写和运行 TypeScript 吗？ 🚨️
Deno 原生支持 TypeScript。只需创建一个
.ts文件并运行deno run yourfile.ts。
从 JS 到 TS
TypeScript 建立在 JavaScript 之上。它是 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）一起生成声明映射文件（.d.ts.map）。声明映射与源映射具有相似的目的，但专门针对 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 运行它。