vben开发入门6：tsconfig.json

typescript 复制代码

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "@vben/tsconfig/web-app.json",
  "compilerOptions": {
    "paths": {
      "#/*": ["./src/*"]
    }
  },
  "references": [{ "path": "./tsconfig.node.json" }],
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig.json

这个文件是 TypeScript 的配置文件，用来告诉编译器：

怎么识别 Vue、TS 代码
路径别名怎么解析
继承哪些通用规则
要检查哪些文件

json 复制代码

  "$schema": "https://json.schemastore.org/tsconfig",

作用：

给 JSON 文件提供智能提示、语法校验 ，让你写 tsconfig 时不会写错格式。
简单理解：编辑器辅助配置，不影响代码运行。

json 复制代码

  "extends": "@vben/tsconfig/web-app.json",

作用：
继承通用 TS 配置 。

这个项目是 monorepo 架构，所有子项目共用一套 TS 规则，放在 @vben/tsconfig 里。
简单理解：不用重复写一堆 TS 配置，直接用框架统一的规则。

json 复制代码

  "compilerOptions": {
    "paths": {
      "#/*": ["./src/*"]
    }
  },

作用：
路径别名配置 ，和 package.json 里的 imports 对应。

#/* → 等价于 ./src/*
代码里写 #/utils → 自动指向 src/utils
简单理解 ：简化代码路径，不用写 ../../../../src 这种长路径。

json 复制代码

  "references": [{ "path": "./tsconfig.node.json" }],

作用：
TS 多项目引用 ，把 Vite 配置（node 环境）和业务代码（浏览器环境）分开解析。
tsconfig.node.json 专门给 vite.config.ts 这类 Node 端文件使用。
简单理解：让 TS 同时支持「项目源码」和「构建工具配置」。

json 复制代码

  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]

作用：
指定哪些文件需要进行 TS 语法检查 。

包含：

src 下所有 .ts 文件
src 下所有 .tsx 文件
src 下所有 .vue 文件（Vue 单文件组件）
简单理解：告诉 TS：只检查 src 里的业务代码。

总结

这个 tsconfig.json 一共做了 4 件事：

提供 JSON 语法提示
继承框架统一的 TS 规则
配置路径别名 #/ → src/
告诉 TS 要检查 src 下的 .ts / .tsx / .vue 文件
关联 Node 环境的 TS 配置（给 vite.config.ts 使用）

核心作用就是：
让 TypeScript 正确识别 Vue 文件、解析路径别名、继承统一规范、检查业务代码。