面向 JavaScript 开发者的 TSConfig 简介
JavaScript 不断发展，从简单的脚本语言发展到如今构建复杂应用程序的强大工具。为了管理更大、更复杂的代码库，JavaScript 开发者一直在寻找方法来改进工作流程、代码质量和生产力。TypeScript 是一个重要的创新，它通过添加类型来提高代码质量和维护性，因此 它成为发展最快的语言之一 并不奇怪。
如果您从未使用过编译语言或编译器，TypeScript 可能会让您感到害怕。或者您可能使用过，并且遇到过一个您不完全理解的复杂 tsconfig.json 文件。这篇博客文章是 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 包含一组标准的库声明 (dom、es5、es6 等)，这些声明基于您的项目所针对的 ECMAScript 版本。但是，您可以使用“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 应在编译过程中包含的文件路径或通配符模式的数组。只有与指定模式匹配的文件才会被视为编译目标。您可以使用通配符模式（例如，“src/**/*.ts”）来包含来自特定目录或具有特定文件扩展名的文件。如果没有指定 include，TypeScript 默认情况下会包含项目目录中的所有 .ts、.tsx 和 .d.ts 文件。
exclude - 此设置指定 TypeScript 应从编译过程中排除的文件路径或通配符模式的数组（即使它们与 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` 立即运行它。