TypeScript 与 tsconfig.json
本文将解释 TypeScript 和 tsconfig.json。
从 TypeScript 的基本作用出发，我们将结合具体示例说明 tsconfig.json 在项目中的作用。
YouTube Video
TypeScript 与 tsconfig.json
TypeScript 是“带有类型的 JavaScript”。然而，要在实际项目中高效地使用 TypeScript，正确理解并有意识地配置 tsconfig.json 极为重要。
为什么我们需要 TypeScript？
首先，使用 TypeScript 的主要原因是**“能够在执行前发现错误”**。
1function add(a: number, b: number): number {
2 return a + b;
3}
4
5add(1, "2");这段代码在 JavaScript 中只有在运行时才会报错，而在 TypeScript 中，会在编译时就产生类型错误。
这种“提前发现”大大提升了开发效率和代码质量。
TypeScript 是如何执行的？
原则上，TypeScript 不能直接执行。你需要使用 tsc（TypeScript 编译器）将其转换为 JavaScript。。
1npm install -D typescript
2npx tsc --init- 通过这个操作，会生成
tsconfig.json，它是定义 TypeScript 项目行为的核心文件。
tsconfig.json 的作用是什么？
tsconfig.json 是一个配置文件，用于确定**“要包含哪些文件”、“使用什么规则”、“如何进行转换”**。虽然一开始看起来很复杂，但其实只有极少数配置真正重要。
1{
2 "compilerOptions": {
3 "target": "ES2020",
4 "module": "ESNext",
5 "strict": true
6 }
7}- 只要设置好这些，就可以进行现代且安全的 TypeScript 开发。
target：输出的 JavaScript 版本
target 用于指定输出的 JavaScript 的规范级别。
1"target": "ES2020"这样，TypeScript 将输出等价于 ES2020 的 JavaScript。对于旧环境请选择 ES5，只支持最新版环境时可以选择 ES2022 等。
当指定 ESNext 时
1"target": "ESNext"-
ESNext表示将输出最新可用的 JavaScript 语法。TypeScript 不会转译这些语法，而是交由 Node.js 或浏览器等运行环境去处理。 -
因此，
ESNext适用于只面向最新版 Node.js，或当你使用 Babel 或其他工具单独转译时。另一方面，如果运行环境不支持最新语法，可能会导致运行时错误，因此需要注意。
module：指定模块格式
module 用于指定模块格式。
1"module": "ESNext"ESNext是前端和现代 Node.js 环境的标准选择。- 只有在需要 CommonJS 时才选择
"CommonJS"。
strict：最大化类型安全性
strict 是最大化 TypeScript 安全性的开关。
1"strict": true- 启用它会全方位捕捉模糊类型和潜在 bug。
strict 模式与隐式 any
启用 strict 后，TypeScript 会将无法推断类型的变量视为错误。
1function printValue(value) {
2 console.log(value);
3}- 变量
value在声明时没有类型信息，因此 TypeScript 无法确定其类型。结果会隐式使用any，在strict模式下会触发警告（错误）。
1function printValue(value: number) {
2 console.log(value);
3}- 通过如此明确指定类型，TypeScript 能明白“这个变量只处理数字”。在 TypeScript 中，类型能被唯一确定比类型能否省略更加重要。
include/exclude：控制要编译的文件
在 tsconfig.json 中，你可以指定要包含的文件和要排除的文件。
1{
2 "include": ["src"],
3 "exclude": ["node_modules"]
4}- 这样只有
src下的文件会被 TypeScript 管理。 - 即使在
include指定的路径下，出现在exclude的node_modules也会被排除。
outDir：指定输出目录
通过指定 outDir 来管理构建输出的位置。
1"outDir": "dist"- 这样，所有编译结果都会输出到
dist文件夹。实际开发中，源代码与构建产物分离是标准做法。
rootDir：指定源码目录
rootDir 用于指定TypeScript 视为源码根目录的文件夹。
1"rootDir": "src"-
此设置让 TypeScript 在输出文件时保持基于
src的目录结构。 例如，src/index.ts会被输出为dist/index.js。 -
rootDir指定的目录结构会被复制到outDir。
esModuleInterop：桥接 CommonJS 和 ES 模块
接下来，我们来看一下 esModuleInterop。
1"esModuleInterop": true- 启用后，你可以安全地用
import语法引入 CommonJS 模块。
1import fs from "fs";- 在使用 Node.js 时，这个设置几乎是必需的。
noImplicitAny：禁止隐式 'any' 类型
增强 tsconfig.json 中的类型检查也很重要。
1"noImplicitAny": true- 通过此设置，可以禁止隐式
any类型。这样可以可靠地发现漏写类型的地方。
用于检测未使用代码的配置
用于检测未使用代码的设置也有助于提升可维护性。
1"noUnusedLocals": true,
2"noUnusedParameters": true- 有了这个，未使用的变量和参数会被立即警告出来。
lib：定义可用的内置 API
lib 是指定TypeScript 认为存在的标准 API的设置。
1"lib": ["ES2020", "DOM"]- 通过此设置，可以使用下列类型：。
选择
ES2020后，可以使用例如Promise、Map、Set等现代特性。 选择DOM后，可以使用如document、window、HTMLElement等浏览器 API。
做前端时请包含 DOM；仅限 Node.js 项目时请移除 DOM，以避免引入不必要的全局类型。
moduleResolution：模块查找规则
moduleResolution 用于确定import 语句中模块的解析方式。
1"moduleResolution": "Node"主要有以下两种选择：。
- 指定
Node时会采用 Node.js 的模块查找规则。 Classic是旧的 TypeScript 专用方法，但现在很少使用。
在使用 Node.js 或打包工具的环境中，明确指定 Node 是安全的选择。
最小化、可投入生产使用的 tsconfig.json
基于目前讲的内容，一个最小化、适用于生产环境的 tsconfig.json 如下所示：。
1{
2 "compilerOptions": {
3 "target": "ES2020",
4 "module": "ESNext",
5 "moduleResolution": "Node",
6 "lib": ["ES2020", "DOM"],
7 "strict": true,
8 "rootDir": "src",
9 "outDir": "dist",
10 "esModuleInterop": true,
11 "noImplicitAny": true,
12 "noUnusedLocals": true,
13 "noUnusedParameters": true
14 },
15 "include": ["src"]
16}此配置为前端和 Node.js 项目都提供了安全的基础。
总结：tsconfig.json 就是一份“规则手册”
tsconfig.json 不只是配置文件，更是适用于整个项目的“规则手册”。tsconfig.json 可以清晰地定义以下重要规范：。
- 类型安全级别。
- 团队的编码规范。
- 预防今后的 bug。
理解 tsconfig.json 后，你不仅能编写 TypeScript，还能为项目设计更安全的 TypeScript 使用方案。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。