tsconfig.json 吓到了所有人。这是一个巨大的文件,包含大量潜在选项。 tsconfig.json 吓到了所有人。这是一个巨大的文件,有很多潜在的选项。
但实际上,您只需要关心几个配置选项。让我们弄清楚它们,并制作备忘单。让我们找出它们并创建一个备忘单。
Quickstart 快速开始
只需要代码吗?给你: 只是想要代码吗?请看下面:
{ 'compilerOptions': { /* 基本选项: *//* 基本选项: */'esModuleInterop': true, 'skipLibCheck': true, 'target': 'es2022', 'verbatimModuleSyntax': true, 'allowJs': true , 'resolveJsonModule': true, 'moduleDetection': 'force', /* 严格性*//* Strictness: */'strict': true, 'noUncheckedIndexedAccess': true, /* 如果使用TypeScript: 转译*//* 如果使用TypeScript: 转译*/'moduleResolution': 'NodeNext', 'module': 'NodeNext', /* 如果不使用TypeScript: 进行转译*//* 如果不使用TypeScript: 进行转译*/'moduleResolution': 'Bundler' , 'module': 'ESNext ', 'noEmit': true, /* 如果你的代码在DOM: 中运行*//* 如果你的代码在DOM: 中运行*/'lib': ['es2022', 'dom', 'dom.iterable'], /* 如果您的代码不在DOM: 中运行*//* 如果您的代码不在DOM: 中运行*/'lib': ['es2022'], /* 如果您正在为库: 构建*//* 'declaration': true, /* 如果您正在monorepo: 中构建库*//* 如果您正在monorepo: 中构建库*/'composite': true, 'sourceMap': true , 'declarationMap': true }}
Full Explanation 完整解释
Base Options 基本选项
以下是我为所有项目推荐的基本选项。
{'compilerOptions': {'esModuleInterop': true,'skipLibCheck': true,'target':'es2022','verbatimModuleSyntax': true,'allowJs': true,'resolveJsonModule': true,'moduleDetection':'力' }}esModuleInterop: 帮助修复CommonJS 和ES Modules 之间的一些障碍。esModuleInterop:帮助修复CommonJS 和ES Modules 之间的一些问题。 skipLibCheck: 跳过检查.d.ts 文件的类型。这对于性能来说很重要,因为否则所有的node_modules都会被检查。skipLibCheck:跳过检查.d.ts文件的类型。这对于性能来说很重要,否则所有的node_modules都会被检查。 target: 您要定位的JavaScript 版本。为了稳定性,我建议使用es2022 而不是esnext。target:您要定位的JavaScript 版本。我建议使用es2022 而不是esnext 以获得更稳定的支持。 verbatimModuleSyntax: 使用此选项,只会删除使用导入类型的导入。这是最可预测的行为。 allowJs 和resolveJsonModule: 允许您导入.js 和.json 文件。始终有用。allowJs 和resolveJsonModule:允许您导入.js 和.json 文件。非常有用。 moduleDetection: 此选项强制TypeScript 将所有文件视为模块。这有助于避免“无法重新声明块范围变量”错误。 moduleDetection:此选项强制TypeScript 将所有文件视为模块。这有助于避免“无法重新声明块作用域变量”错误。
严格性 Strictness
以下是我为所有项目推荐的严格性选项。以下是我为所有项目推荐的严格性选项。
{ 'compilerOptions': { 'strict': true, 'noUncheckedIndexedAccess': true }}strict: 启用所有严格类型检查选项。 Indispensable.strict:启用所有严格类型检查选项。必不可少。 noUncheckedIndexedAccess: 阻止您在未先检查数组或对象是否已定义的情况下访问该数组或对象。这是防止运行时错误的好方法,应该包含在严格模式中。许多人推荐tsconfig/bases 中的严格性选项,这是一个很棒的存储库,其中记录了TSConfig 选项。这些选项包括许多我认为过于“嘈杂”的规则,例如noImplicitReturns、noUnusedLocals、noUnusedParameters 和noFallthroughCasesInSwitch。我建议您仅在需要时将这些规则添加到tsconfig.json 中。
许多人建议使用tsconfig/bases 中的strictness 选项,这是一个很棒的存储库,记录了TSConfig 的各种选项。这些选项包括许多我认为过于“嘈杂”的规则,例如noImplicitReturns、noUnusedLocals、noUnusedParameters 和noFallthroughCasesInSwitch。我建议仅在需要时将这些规则添加到tsconfig.json 中。
Transpiling with TypeScript 使用 TypeScript 进行转译
如果您使用tsc 转译代码(创建JavaScript 文件),您将需要这些选项。
{ 'compilerOptions': { 'moduleResolution': 'NodeNext', 'module': 'NodeNext' }}moduleResolution: 告诉TypeScript 如何解析模块。如果您正在编写的代码要在Node.moduleResolution 中运行,则NodeNext 是最佳选择:告诉TypeScript 如何解析模块。对于要在Node 中运行的代码,NodeNext 是最佳选择。 module: 告诉TypeScript 使用什么模块语法。 NodeNext 是Node.module 的最佳选择:告诉TypeScript 使用什么模块语法。对于Node 来说,NodeNext 是最好的选择。
Not Transpiling with TypeScript 不使用 TypeScript 进行转译
如果您不使用tsc 转译代码,即更多地使用TypeScript 作为linter,则您将需要这些选项。您将需要以下选项的工具。
{ 'compilerOptions': { 'moduleResolution': 'Bundler', 'module': 'ESNext', 'noEmit': true }} 如果您正在编写的代码要与Webpack、Rollup、Babel、SWC 或ESBuild 等工具。 moduleResolution:对于需要使用Webpack、Rollup、Babel、SWC 或ESBuild 等工具捆绑的代码,Bundler 是最佳选择。 module: ESNext 是最好的选择,因为它最接近地模仿捆绑程序如何对待模块。 module:ESNext 是最好的选择,因为它最接近地模仿捆绑程序如何对待模块。
Running in the DOM 在 DOM 中运行
如果您的代码在DOM 中运行,您将需要这些选项。
{ 'compilerOptions': { 'lib': ['es2022', 'dom', 'dom.iterable'] }}lib: 告诉TypeScript 要包含哪些内置类型。 es2022 是稳定性的最佳选择。多姆和多姆。 iterable 为您提供窗口、文档等的类型。lib:告诉TypeScript 包含哪些内置类型。 es2022 是最稳定的选择。 dom 和dom.iterable 为您提供窗口、文档和其他类型。
Not Running in the DOM 不在 DOM 中运行
如果您的代码不在DOM 中运行,您将需要lib: ['es2022']。
{ 'compilerOptions': { 'lib': ['es2022'] }}这些与上面相同,但没有dom 和dom.iterable 类型。定义。
Building for a Library 构建库
如果您正在构建图书馆,则需要声明: true。
{ 'compilerOptions': { 'declaration': true }}declaration: 告诉TypeScript 发出.d.ts 文件。这是必需的,以便库可以自动完成您正在创建的.js 文件。声明:告诉TypeScript 发出.d。ts 文件。这样库就可以自动完成您创建的.js 文件。
Building for a Library in a Monorepo 在单体库中构建库
如果您正在monorepo 中构建库,您还需要这些选项。
用户评论
终于找到了这份TSCConfig配置查询手册!之前写TypeScript代码一直懵,现在可以帮我捋清那些选项的功能了。简直是宝藏级资料!
有20位网友表示赞同!
这个TSConfig配置文件真复杂啊,读完还是一头雾水