【TS】tsconfig.json、tsconfig.node.json和tsconfig.app.json的作用与关系

前言

使用 Vite 创建 TS 项目默认会自动生成三个 tsconfig 相关的文件，分别是：tsconfig.json、tsconfig.node.json、tsconfig.app.json。

• tsconfig.node.json：用于配置 vite.config.ts 文件的编译规则
• tsconfig.app.json：为项目中其他文件进行 TypeScript 编译，不包括测试文件、构建工具等。
• tsconfig.json：TS 只识别 tsconfig.json 为配置文件，该文件中引用为了更精细化的控制，需要分别引入tsconfig.node.json、tsconfig.app.json。

tsconfig.json

tsconfig.json 是 TypeScript 项目的主配置文件，用于定义 TypeScript 编译器的行为。它指定了如何编译 TypeScript 代码，包括哪些文件需要被编译、编译选项、输出目录等。

主要功能:

• 配置 TypeScript 编译选项，如 target、module、strict 等。
• 定义要编译的文件（通过 files、include、exclude）。
• 配置输出目录（通过 outDir）。
• 配置编译时的严格检查（如 strict）。

tsconfig.app.json

配置项完全同 tsconfig.json，默认如下：

{
  "compilerOptions": {
    // "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

后续如果需要对项目文件如 .vue .ts 扩展，在此文件中添加配置即可，如配置 @ 路径别名：

{
  "compilerOptions": {
  	......
     /* 新增的配置 */
    "baseUrl": "./",  // 设置基准路径，通常是项目根目录
    "paths": {
      "@/*": ["src/*"]  // 配置 @ 别名指向 src 目录
    }
  },
}

tsconfig.node.json

项目中用于定义 vite.config.ts 的编译规则