TSConfig备忘录
原文来自:The TSConfig Cheat Sheet (Matt Pocock),本人翻译备份用。
tsconfig.json 文件让很多人望而生畏,因为它是一个庞大的文件,包含着大量的配置选项。
但实际上,只需要关注其中较少的几个配置选项就行了。让我们来理清这些选项,并做成简易参考。
快速开始
基本代码示例
{
"compilerOptions": {
/* 基础选项: */
"esModuleInterop": true,
"skipLibCheck": true,
"target": "es2022",
"allowJs": true,
"resolveJsonModule": true,
"moduleDetection": "force",
"isolatedModules": true,
"verbatimModuleSyntax": true,
/* 严格模式 */
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
/* 如果使用 TypeScript 转码: */
"module": "NodeNext",
"outDir": "dist",
"sourceMap": true,
/* 如果要构建一个库: */
"declaration": true,
/* 如果要在单一仓库中构建一个库: */
"composite": true,
"declarationMap": true,
/* 如果不使用 TypeScript 进行转码: */
"module": "preserve",
"noEmit": true,
/* 如果代码运行在 DOM 中: */
"lib": ["es2022", "dom", "dom.iterable"],
/* 如果代码不运行在 DOM 中: */
"lib": ["es2022"]
}
}
完整说明
基本选项
以下是我推荐所有项目都使用的基础选项:
{
"compilerOptions": {
"esModuleInterop": true,
"skipLibCheck": true,
"target": "es2022",
"allowJs": true,
"resolveJsonModule": true,
"moduleDetection": "force",
"isolatedModules": true,
"verbatimModuleSyntax": true
}
}
-
esModuleInterop: 有助于弥合CommonJS和ES Modules之间的某些差距。 -
skipLibCheck: 跳过对.d.ts文件的类型检查。这对于性能很重要,否则所有node_modules都将被检查。 -
target: 你要编译的JavaScript版本。 我推荐使用es2022而非esnext以获得更好的稳定性。 -
allowJs和resolveJsonModule: 允许你导入.js和.json文件。始终很有用。 -
moduleDetection: 此选项强制TypeScript将所有文件视为模块。 这有助于避免“无法重新声明块级作用域变量”错误。 -
isolatedModules: 此选项阻止了一些在将模块视为独立文件时不安全的TS功能。 -
verbatimModuleSyntax: 此选项强制你使用import type和export type,从而带来更可预测的行为和减少不必要的导入。 结合module: NodeNext,它还强制你使用正确的ESM或CJS导入语法。
严格模式
以下是我推荐所有项目使用的严格模式选项:
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true
}
}
-
strict: 启用所有严格的类型检查选项。必要。 -
noUncheckedIndexedAccess: 防止你在不首先检查数组或对象是否定义的情况下进行访问。 这是一种防止运行时错误的好方法,并且应该真正包含在strict中。 -
noImplicitOverride: 使override关键字在类中真正有用。
许多人推荐 tsconfig/bases 中的严格模式选项,这是一个很棒的存储库,它列举了 TSConfig 选项。 但这些选项包含了许多我认为过于“繁琐”的规则,例如 noImplicitReturns、noUnusedLocals、noUnusedParameters 和 noFallthroughCasesInSwitch。 我建议仅在你想要它们时才将这些规则添加到你的 tsconfig.json 中。
使用 TypeScript 进行转码
如果你正在使用 tsc 转码你的代码(创建 JavaScript 文件),则需要以下选项:
{
"compilerOptions": {
"module": "NodeNext",
"outDir": "dist"
}
}
-
module: 告诉TypeScript要使用什么模块语法。NodeNext是适用于Node的最佳选项。moduleResolution: NodeNext可以从这个选项推断出来。 -
outDir: 告诉TypeScript将编译后的JavaScript文件放在哪里。dist是我的首选约定,但这由你决定。
构建库
如果你要构建一个库,则需要 declaration: true
{
"compilerOptions": {
"declaration": true
}
}
declaration: 在tsconfig.json文件中告诉TypeScript声明.d.ts文件。
单仓库中的库构建
如果您要为单仓库中的库构建,那么您还需要以下选项:
{
"compilerOptions": {
"declaration": true,
"composite": true,
"sourceMap": true,
"declarationMap": true
}
}
-
composite: 告诉TypeScript声明.tsbuildinfo文件。这会告诉TypeScript你的项目是单仓库,并且还有助于缓存构建以更快地运行。 -
sourceMap和declarationMap: 告诉TypeScript声明映射。当库的使用者进行调试时,需要这些选项以便他们可以使用跳转到定义功能来跳转到原始源代码。
不使用 TypeScript 进行转译
如果您不使用 tsc 转译您的代码,即更像使用 TypeScript 作为 linter,那么您将需要以下选项:
{
"compilerOptions": {
"module": "preserve",
"noEmit": true
}
}
-
module:preserve是最佳选项,因为它最接近捆绑器处理模块的方式。由此选项暗示了moduleResolution: Bundler。 -
noEmit: 告诉TypeScript不发出任何文件。当您使用捆绑器时,这很重要,这样就不会发出无用的.js文件。
在 DOM 中运行
如果你的代码在 DOM 中运行,则需要以下选项:
{
"compilerOptions": {
"lib": ["es2022", "dom", "dom.iterable"]
}
}
lib: 告诉TypeScript要包含哪些内置类型。es2022是稳定性的最佳选择。dom和dom.iterable为您提供window、document等的类型。
不在 DOM 中运行
如果你的代码不在 DOM 中运行,则您需要 lib: ["es2022"]。
{
"compilerOptions": {
"lib": ["es2022"]
}
}
这与上面相同,但没有 dom 和 dom.iterable 类型。