tsconfig.json 常用配置

tsconfig.json 常用配置tsconfig.json这个文件是干什么的怎么生成它顶层字段include / exclude / filesextends配置也可以继承compileOnSave保存时自动编译最核心的部分(compilerOptions)1. 编译输出相关2. 类型检查相关3. 模块解析与路径别名4. 其他实用选项一个常见的配置模板几点小建议tsconfig.json这个文件是干什么的只要项目根目录存在tsconfig.jsonTypeScript 就会把它当成一个项目的起点。它主要做三件事明确项目根路径编译器知道从哪开始找文件。控制编译行为比如输出到哪个目录、用哪种模块规范。划定文件范围哪些文件要编译哪些可以忽略。如果你是 JavaScript 项目也可以用jsconfig.json作用类似只不过默认开启了一些针对 JS 的编译选项。怎么生成它最省事的办法在终端里执行npx tsc--init执行完会生成一个带详细注释的配置文件每个选项旁边都有解释很适合初次接触的人。如果你想自己创建也可以直接新建一个tsconfig.json然后去 tsconfig/bases 复制一份和你框架匹配的基础配置。顶层字段include / exclude / filesinclude指定需要编译的文件或文件夹支持通配符*和**。例如src/**/*表示编译 src 下所有文件。exclude从编译列表中排除某些文件默认已经排除了node_modules等目录。files只能一个一个列出具体文件路径不适合文件多的项目管理起来比较麻烦。一般情况下用include加exclude就足够了。extends配置也可以继承如果你的项目有多个子模块或者想在多个项目之间共享一套基础配置可以用extends来继承另一个配置文件{extends:./base.json,compilerOptions:{outDir:./dist}}甚至可以直接引用 npm 包里的配置比如tsconfig/node12省得自己从头写。compileOnSave保存时自动编译这个选项在 VS Code 里并不起作用只有 Visual Studio 才认。所以基本可以忽略它。最核心的部分(compilerOptions)这部分是配置的重头戏下面按功能分类说几个常用的。1. 编译输出相关target编译后的 JS 版本现在基本都用ES2020或更高除非你需要兼容特别旧的浏览器。module模块规范Node 环境常用commonjs前端打包项目可以用ESNext。lib指定代码里可用的 JS 内置对象如Promise、Map如果你用了较新的语法需要在这里补充对应的库声明。outDir编译输出目录比如./dist。rootDir源码根目录保证输出的目录结构和源码对应。sourceMap是否生成.map调试文件建议开启。declaration是否生成.d.ts类型声明文件如果你在写库这个必须开。2. 类型检查相关strict是一个总开关开启它会同时启用noImplicitAny、strictNullChecks等多个严格的检查选项。强烈建议始终开启它能让 TypeScript 真正发挥类型安全保障的作用提前发现很多潜在的运行时错误。如果你在旧项目上初次开启可能会遇到一堆报错但修复之后代码质量会有明显提升。3. 模块解析与路径别名moduleResolution通常设为node使用 Node.js 的解析策略。baseUrl和paths配合使用可以设置路径别名比如{baseUrl:.,paths:{/*:[src/*]}}这样你在代码里就能写import utils from /utils了。不过要注意打包工具如 Vite、Webpack也需要同步配置相同的别名否则运行时会找不到文件。4. 其他实用选项resolveJsonModule允许直接importJSON 文件。esModuleInterop让 ES 模块和 CommonJS 互操作更顺畅建议开启。skipLibCheck跳过对声明文件的类型检查能加快编译速度通常开着没问题。incremental启用增量编译第二次及之后的编译会快很多开发环境下推荐开启。一个常见的配置模板下面这个模板综合了上面提到的常用选项你可以在此基础上按需调整{compilerOptions:{target:ES2020,module:commonjs,lib:[ES2020,DOM],outDir:./dist,rootDir:./src,sourceMap:true,declaration:true,strict:true,noImplicitAny:true,strictNullChecks:true,moduleResolution:node,baseUrl:.,paths:{/*:[src/*]},esModuleInterop:true,resolveJsonModule:true,skipLibCheck:true,incremental:true},include:[src/**/*],exclude:[node_modules,dist,**/*.test.ts]}几点小建议严格模式别关。strict: true带来的收益远大于初期修改成本。路径别名用起来。配上baseUrl和paths能让 import 语句清爽不少。善用extends。如果项目里有多个子项目抽一份公共配置出来维护起来省心。拿不准的配置查官方文档。TypeScript 官方 TSConfig 参考 写得很清楚比到处搜靠谱。