tsconfig 生成
按运行环境(Node ESM / Node CJS / 浏览器 / 库 / React / Vue / Astro)生成 tsconfig.json,可调 target、strict、路径别名与 include / exclude,并逐条解释每个关键选项的作用。
浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。
运行环境
预览
{
"compilerOptions": {
"target": "ES2022",
"lib": [
"ES2022"
],
"module": "NodeNext",
"moduleResolution": "NodeNext",
"types": [
"node"
],
"strict": true,
"noEmit": false,
"outDir": "dist",
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
"verbatimModuleSyntax": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}
target: ES2022target 设为 ES2022:类字段、顶层 await、at() 原样输出,Node 18 与现代浏览器都支持。
lib: ES2022lib 决定能用哪些全局 API:Node 项目不要 DOM,前端项目必须带上 DOM 与 DOM.Iterable。
module: NodeNextmodule 用 NodeNext:Node 按 package.json 的 type 决定 ESM/CJS,相对导入要写全扩展名。
moduleResolution: NodeNextmoduleResolution 跟着 module 用 NodeNext,完全按 Node 的解析规则找依赖与扩展名。
types: nodetypes 限定自动引入哪些全局类型包,能避免 @types 全量加载带来的命名冲突与变慢。
strict: truestrict 一次打开全部严格检查(strictNullChecks、noImplicitAny 等),新项目建议保持开启。
noEmit: falsenoEmit 表示只做类型检查不产出文件:交给打包器时用 true,Node 与库项目用 false。
isolatedModules: trueisolatedModules 要求每个文件都能单独转译,避免只做类型导入的写法在单文件转译时出错。
verbatimModuleSyntax: trueverbatimModuleSyntax 强制把 import type 与 import 分开写,模块格式不会被 TS 悄悄改写。
include: srcinclude 决定参与编译的文件,只列源码目录可以避免把构建产物再编译一遍。
exclude: node_modules, distexclude 排除不参与编译的目录,node_modules 与构建产物通常都要排除。
生成的是单文件配置:需要继承基础配置时可以改成 extends,但要把被覆盖的选项删掉,避免两份配置互相打架。
这个工具能做什么
- 新项目要写 tsconfig.json,但不确定 module 与 moduleResolution 该怎么配:选好运行环境就有了一份能直接用的配置。
- 把老项目从 CommonJS 迁到 ESM:切到 Node(ESM)看 NodeNext 下需要哪些选项,再逐步迁移。
- 做库时要同时输出 .d.ts:选「库」环境即可拿到 declaration、declarationMap 与 outDir 的组合。
- 排查类型报错时对照右侧的关键选项说明,搞清楚是 target、lib 还是 strict 相关选项在起作用。
示例
输入
环境 Node(ESM);target 跟随环境默认;开启 strict;include 填 src;exclude 填 node_modules, dist
输出
{
"compilerOptions": {
"target": "ES2022",
"lib": [
"ES2022"
],
"module": "NodeNext",
"moduleResolution": "NodeNext",
"types": [
"node"
],
"strict": true,
"noEmit": false,
"outDir": "dist",
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
"verbatimModuleSyntax": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}
target 默认跟随环境(这里是 ES2022);勾选路径别名会额外补上 baseUrl: "." 与 paths,并在下方给出每条关键选项的解释。
常见问题
module 和 moduleResolution 有什么区别?
module 决定产出的模块格式(ESM、CommonJS 还是原样保留),moduleResolution 决定 TS 怎么找文件与依赖。两者要配套:Node 用 NodeNext / NodeNext,前端打包器用 ESNext / Bundler,老式 CommonJS 项目用 CommonJS / node10。
为什么浏览器环境要设 noEmit?
前端代码的类型检查通常由 tsc --noEmit 完成,真正的打包交给 Vite、webpack 或 Astro。如果这里让 TS 也输出文件,产物会重复甚至互相覆盖,所以浏览器、React、Vue、Astro 预设都保持 noEmit: true。
lib 里要不要加 DOM?
要看代码在哪儿跑。Node 项目加了 DOM 会让 document、window 这类只存在于浏览器的全局变量通过类型检查,运行时才报错;前端项目不加 DOM 则连 document 都不认识。默认已经按环境选好。
noUncheckedIndexedAccess 会不会太严?
它让 obj[key] 与 arr[i] 的结果都带上 undefined,逼你处理越界情况。对公开库或数据处理代码很值,但会让大量既有代码报错,建议新项目一开始就打开,老项目单独评估。
生成的配置可以直接用吗?
可以直接保存为项目根目录的 tsconfig.json。需要复用公司基础配置时,把 compilerOptions 挪到被 extends 的文件里,或把这份配置改成 extends 并删掉重复项,避免两份配置互相覆盖。
关键词:tsconfigtsconfig.jsontsconfig 生成typescript 配置moduleResolutionNodeNextjsx react-jsxstrict路径别名typescript 编译选项browser bundlertype declaration