TypeScript - tsconfig.json：初学者指南

你好啊，未来的编码超级巨星！? 今天，我们将踏上一段激动人心的旅程，探索 TypeScript 及其忠诚的助手 tsconfig.json 文件。如果你之前从未写过一行代码，也不用担心——我将作为你的友好向导，我们会一起逐步攻克这个难题。

TypeScript - tsconfig.json

tsconfig.json 是什么？

在我们深入研究之前，让我们先聊聊 tsconfig.json 究竟是什么。想象一下你正在建造一座房子（你的 TypeScript 项目）。tsconfig.json 文件就像是你的房子的蓝图。它告诉 TypeScript 你希望如何构建你的项目，你希望使用哪些特性，以及你希望规则有多么严格。

tsconfig.json 文件的基本结构

现在，让我们来看看 tsconfig.json 文件的基本结构。它是用 JSON 格式编写的，这是一种既适合人类阅读又适合计算机理解的数据组织方式。

以下是一个简单的例子：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

让我们来分解一下：

整个文件被大括号 {} 包裹。
在其中，我们有 compilerOptions、include 和 exclude 这样的不同部分。
每个部分都包含特定的设置。

CompilerOptions

compilerOptions 部分是魔法发生的地方。这就像是在告诉厨师（TypeScript 编译器）你希望你的食物（代码）如何准备。让我们看看一些常见的选项：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

让我们解释一下每一个：

target：这告诉 TypeScript 编译成哪个版本的 JavaScript。 "es5" 是大多数浏览器广泛支持的。
module：这指定使用哪个模块系统。 "commonjs" 在 Node.js 项目中常用。
strict：当设置为 true 时，它启用一组严格的类型检查选项。
outDir：这是 TypeScript 将编译后的 JavaScript 文件放置的位置。
rootDir：这是 TypeScript 应该查找你的源文件的位置。
sourceMap：当为 true 时，它生成源地图文件，这对于调试非常有用。

Include 和 Exclude

include 和 exclude 部分告诉 TypeScript 编译哪些文件以及忽略哪些文件：

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

include：这告诉 TypeScript 编译 src 文件夹及其子文件夹中的所有文件。
exclude：这告诉 TypeScript 忽略 node_modules 文件夹和任何以 .spec.ts 结尾的文件（通常用于测试文件）。

常见场景和配置

现在我们理解了基础知识，让我们看看你可能遇到的一些常见场景以及如何为它们配置 tsconfig.json。

场景 1：React 项目

如果你正在处理一个 React 项目，你可能会使用这样的配置：

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

这个配置是为了优化 React 开发。它允许你使用 JSX，启用严格的类型检查，并为典型的 React 项目结构设置模块解析。

场景 2：Node.js 后端项目

对于一个 Node.js 后端项目，你可能会使用这样的配置：

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

这个配置适用于 Node.js 后端项目。它编译到更新的 JavaScript 版本（ES2018），使用 CommonJS 模块，并设置输入和输出目录。

有用的 tsconfig.json 选项

以下是一些你可能想要使用的有用的 tsconfig.json 选项：

选项	描述
`noImplicitAny`	在表达式和声明中有隐含的 'any' 类型时引发错误
`strictNullChecks`	启用严格的 null 检查
`strictFunctionTypes`	启用函数类型的严格检查
`strictBindCallApply`	启用对函数的 'bind'、'call' 和 'apply' 方法的严格检查
`noUnusedLocals`	报告未使用局部变量的错误
`noUnusedParameters`	报告未使用参数的错误
`noImplicitReturns`	当函数中的所有代码路径不返回值时报告错误
`noFallthroughCasesInSwitch`	在 switch 语句中报告 fallthrough 情况的错误

记住，你总是可以参考官方 TypeScript 文档以获取完整选项列表及其描述。

结论

就这样，我的编程学徒！我们已经穿越了 tsconfig.json 的土地，从其基本结构到常见场景和有用的选项。记住，tsconfig.json 就像是你 TypeScript 项目的瑞士军刀——它非常多功能，可以根据你的特定需求进行定制。

在你继续你的 TypeScript 冒险时，不要害怕尝试不同的配置。每个项目可能都需要稍微不同的设置，这很正常！你越多地摆弄 tsconfig.json，就会越熟悉它的力量。

继续编码，继续学习，最重要的是，玩得开心！直到下次，愿你的类型强大，错误少有。快乐 TypeScript！??‍??‍?

Credits: Image by storyset

上一教程:

TypeScript -装箱和拆箱

下一教程:

从JavaScript到TypeScript