【架构相关】tsconfig.json 与 tsconfig.node.json、tsconfig.app.json 的关系和作用
现代 TypeScript 项目常见的多项目配置模式，特别适用于包含前端和 Node.js 工具链的全栈项目，会同时包含 tsconfig.json 与 tsconfig.node.json、tsconfig.app.json，你知道这是为什么吗？今天就简单介绍一下。
1. 关系说明
- tsconfig.json 是 TypeScript 项目的根配置文件，常作为基础配置或入口配置，通过 references 字段关联其他子配置（如 tsconfig.node.json 和 tsconfig.app.json），实现多配置的统一管理。
- tsconfig.app.json：用于应用程序代码的 TypeScript 配置，比如Vue 组件、浏览器环境
- tsconfig.node.json：用于 Node.js 环境相关代码的 TypeScript 配置，如项目的构建脚本、服务端逻辑等
2. 各配置文件的作用
tsconfig.json（根配置）：
作为项目的「总配置」，定义公共编译选项或通过 references 关联其他子配置，方便统一执行构建命令（如 tsc -b）。
- 不包含具体编译文件（“files”: []）
- 通过 references 字段建立项目引用关系
- 支持项目分层构建和增量编译
tsconfig.app.json：
- 配置应用前端代码的编译选项
- 通常包括 Vue 组件、浏览器 API 相关代码等
tsconfig.node.json：
- 配置 Node.js 环境下的代码编译选项
- 通常包括构建脚本、工具函数等服务端代码
3. 为什么这么做？
- 模块化管理：将不同环境的代码分开配置，便于维护
- 增量编译：只重新编译发生变化的部分，提高构建效率
- 类型检查隔离：不同环境使用不同的编译选项和库定义
- 项目引用：支持跨项目引用和类型检查
**这种拆分的核心目的是：针对不同运行环境（Node.js vs 浏览器）的差异，配置不同的 TypeScript 编译规则，避免类型检查冲突。**这种结构让 TypeScript 能更精准地进行类型检查，同时保持配置的灵活性和可维护性。
下面附上一部分 tsconfig 的配置代码：
tsconfig.json
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{"compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo","target": "ES2023","lib": ["ES2023"],"module": "ESNext","types": ["node"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler", // 使用 bundler 模块解析策略"allowImportingTsExtensions": true,"verbatimModuleSyntax": true,"moduleDetection": "force","noEmit": true,/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["vite.config.ts"]
}
tsconfig.app.json
{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","types": ["vite/client"],/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}