跳到主内容
UniKit

tsconfig 生成

按运行环境(Node ESM / Node CJS / 浏览器 / 库 / React / Vue / Astro)生成 tsconfig.json,可调 target、strict、路径别名与 include / exclude,并逐条解释每个关键选项的作用。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

运行环境

编译选项

预览

环境
Node(ESM)
target
ES2022
compilerOptions
15
tsconfig.json
{
  "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

    target 设为 ES2022:类字段、顶层 await、at() 原样输出,Node 18 与现代浏览器都支持。

  • lib: ES2022

    lib 决定能用哪些全局 API:Node 项目不要 DOM,前端项目必须带上 DOM 与 DOM.Iterable。

  • module: NodeNext

    module 用 NodeNext:Node 按 package.json 的 type 决定 ESM/CJS,相对导入要写全扩展名。

  • moduleResolution: NodeNext

    moduleResolution 跟着 module 用 NodeNext,完全按 Node 的解析规则找依赖与扩展名。

  • types: node

    types 限定自动引入哪些全局类型包,能避免 @types 全量加载带来的命名冲突与变慢。

  • strict: true

    strict 一次打开全部严格检查(strictNullChecks、noImplicitAny 等),新项目建议保持开启。

  • noEmit: false

    noEmit 表示只做类型检查不产出文件:交给打包器时用 true,Node 与库项目用 false。

  • isolatedModules: true

    isolatedModules 要求每个文件都能单独转译,避免只做类型导入的写法在单文件转译时出错。

  • verbatimModuleSyntax: true

    verbatimModuleSyntax 强制把 import type 与 import 分开写,模块格式不会被 TS 悄悄改写。

  • include: src

    include 决定参与编译的文件,只列源码目录可以避免把构建产物再编译一遍。

  • exclude: node_modules, dist

    exclude 排除不参与编译的目录,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

同类工具