格 千格 KiloCell

tsconfig.json 编辑器

可视化配置 TypeScript 编译选项：预设模板 + 实时 JSON 预览，本地生成可复制下载。

快速预设

基础选项

生成的 JavaScript 目标版本
模块系统
.tsx 中 JSX 处理方式

严格检查

启用全部严格类型检查
禁止隐式 any
严格 null/undefined

模块互操作

改善 CJS/ESM 互操作
跳过 .d.ts 检查
强制文件名大小写一致

预览 tsconfig.json


















什么是 tsconfig.json？为什么它在 TypeScript 项目中至关重要？



tsconfig.json
          是 TypeScript
          项目的根目录文件，它定义了项目的编译选项、包含/排除的文件列表以及对其他配置的引用。没有这个文件，TypeScript
          编译器（tsc）将不知道如何处理您的
          .ts
          文件。
        



tsconfig.json 编辑器
          旨在通过可视化的方式，帮助开发者快速配置出符合行业最佳实践的项目结构。
        


核心配置选项解析


1. 编译目标 (Target)



target
          决定了 TS 代码被编译成哪个版本的 JavaScript。如果您需要支持旧版浏览器（如
          IE11），通常设置为
          ES5
          。对于现代项目（如 Node.js 18+ 或现代浏览器），建议使用
          ES2022
          或
          ESNext
          以获得更好的性能和更少的代码转换。
        


2. 严格模式 (Strict Mode)



          强烈建议开启
          "strict": true
          。它实际上是一组检查开关的组合，包括
          strictNullChecks
          、
          noImplicitAny
          等。开启严格模式可以捕获大约 90% 的潜在运行时错误，这是 TypeScript 最大的价值所在。
        


3. 模块互操作性 (esModuleInterop)



          在 JavaScript 的世界里，存在 CommonJS 和 ES 模块两种体系。开启
          esModuleInterop
          可以让您在导入一些旧版库（如 React 或 Express）时，使用更自然的
          import React from 'react'
          语法，而不是繁琐的
          import * as React from 'react'
          。
        


本工具的独特优势


    

  • 
场景化预设：
            提供针对 Node.js、React、Vue 等主流框架的一键预设，避免新手在复杂的选项中迷失方向。
          
    • 

  • 
实时预览：
            所有的 UI 调整都会瞬间反映在右侧的代码预览中，方便您理解每个选项生成的具体 JSON 结构。
          
    • 

  • 
零学习成本：
            每个选项都配有中文说明，并标注了对应的 TS 官方文档术语。
          
    • 

  • 
本地安全：
            所有的配置生成均在本地浏览器完成，不涉及任何服务器上传，保护您的项目结构私密性。
          
    • 



如何使用本编辑器？



          1.
          选择预设：
          从左侧侧边栏选择一个最符合您当前项目的模板。
        



          2.
          精细化调整：
          在中间区域根据您的具体需求勾选开关或选择下拉菜单。
        



          3.
          获取配置：
          点击右侧的“复制”或“下载”按钮，将生成的 JSON 内容放入项目根目录即可。
        


moduleResolution 详解：bundler 与 NodeNext 的取舍



          在 TypeScript 5.0 之后，moduleResolution 的选项从原来的 node/node16/bundler 逐步收敛。
          前端项目（Vite、Webpack、esbuild 等打包器）推荐使用 bundler：它假设所有模块都会被打包器处理，
          因此不要求显式写 .js 后缀，也允许 ESM 与 CJS 在同一项目内混用，与现代构建工具的语义最贴近。
        



          但后端项目（Node.js 运行时直接执行 .js）应使用 NodeNext 或 Node16：
          它强制按 Node 的 ESM 解析规则，import 语句必须带文件后缀，package.json 的 type 字段也需正确设置。
          本编辑器的 Node 预设已默认配置为 NodeNext，避免打包器与运行时语义不一致导致的运行期错误。
        


include 与 exclude 的协作：避免误编译第三方依赖



include 指定要编译的源文件范围，默认是 ["src"]，符合大多数项目的目录结构。
          如果您的源码在 app/ 或 lib/ 下，可手动改为对应路径。
          exclude 默认会忽略 node_modules、dist、build 等输出目录，无需额外声明。
        



          常见陷阱：当您引用了 monorepo 兄弟包（如 @myorg/ui）时，
          TypeScript 可能尝试重新编译它，导致构建变慢甚至类型冲突。
          解决方法：在 exclude 中显式加入该包路径，或为该包单独提供 .d.ts 声明文件，让 tsc 直接读取类型而不重新编译。
        


strict 模式开启后的子项含义



"strict": true 等价于一组严格开关同时打开，包括：
          strictNullChecks（严格区分 null/undefined）、
          noImplicitAny（禁止隐式 any）、
          strictFunctionTypes（函数参数由双变改抗变）、
          strictBindCallApply（bind/call 严格类型）、
          strictPropertyInitialization（类属性必须初始化）、
          noImplicitThis、useUnknownInCatchVariables、
          alwaysStrict。
        



          本编辑器默认开启 strict、noImplicitAny、strictNullChecks，
          这三项是 90% 隐性运行期错误的捕获点，建议在新建项目时立即开启。其他子项可在生成的 JSON 中手动补齐。
        


常见配置陷阱与排查思路


    

  • 
JSX 报错 "Cannot find name 'React'"：
            多数是 jsx 选了 legacy react，需要 import React from 'react'。
            改用 react-jsx（React 17+）即可省略 import。
          
    • 

  • 
导入 .json 报错：
            需开启 "resolveJsonModule": true，本编辑器默认已开启。
          
    • 

  • 
"Cannot use import statement outside a module"：
            检查 module 与 package.json 的 type 字段是否一致。
            ESM 项目应设置 "type": "module" 并使用 NodeNext 或 ESNext。
          
    • 

  • 
从 CJS 库导入时报 "esModuleInterop" 警告：
            开启 "esModuleInterop": true，本编辑器默认已开启。
          
    • 

  • 
build 后类型丢失：
            检查是否开启 "declaration": true。NPM 库开发预设已自动开启。
          
    • 



与官方 tsconfig 基础集的兼容关系



          TypeScript 官方维护的 tsconfig/bases
          仓库提供了一批可继承的预设（如 @tsconfig/strictest、@tsconfig/vite-react、@tsconfig/create-react-app）。
          本编辑器生成的配置在选项取值上与这些预设高度重合，但以"单文件可独立使用"为目标，
          不依赖 npm install 额外包，方便初学者快速验证与排查。当项目复杂度上升时，可平滑迁移到 extends 模式：让 tsconfig.json 只声明差异项，基础部分继承官方包。