tsconfig.json详解有这份还不知道怎么配置吗？

tsconfig.json 是 TypeScript 项目中的一个重要配置文件，它定义了编译器的行为以及项目的结构。具体意义如下：

1. 控制编译选项：

   • tsconfig.json 中的 compilerOptions 部分允许开发者指定 TypeScript 编译器的各种设置，例如目标 ECMAScript 版本、模块系统、严格类型检查等。这样可以根据项目的需求灵活配置编译行为。

2. 项目结构定义：

   • 文件的 include 和 exclude 字段可以指定哪些文件和目录应该包含或排除在编译过程中，帮助优化编译的速度和输出结果。

3. 增强开发体验：

   • 通过配置选项，可以开启严格类型检查、源映射以及自动生成类型定义文件等功能，从而提高代码质量和开发效率。

4. 支持模块化与多项目结构：

   • references 字段支持大型项目的模块化，使得不同的 TypeScript 项目可以互相引用和依赖，便于管理和构建复杂的应用。

5. 共享配置：

   • 通过 extends 选项，可以很方便地从其他 tsconfig.json 文件继承配置，促进团队协作及配置的复用。

6. 自定义路径和库：

   • 通过 paths 和 baseUrl 等选项，开发者可以自定义模块的导入路径，简化导入语句，并管理类型定义库的位置。

{
  "compilerOptions": {
    "target": "ES6", // 指定要编译的目标 ECMAScript 版本
    "module": "ESNext", // 指定模块系统，如 "commonjs", "amd", "esnext"等
    "lib": ["ES6", "DOM"], // 指定要包含的库，如 "es6", "dom"
    "allowJs": true, // 是否允许编译 JavaScript 文件
    "checkJs": false, // 检查 JavaScript 文件中的错误
    "jsx": "preserve", // 指定 JSX 的处理方式
    "declaration": true, // 生成对应的 `.d.ts` 声明文件
    "sourceMap": true, // 生成源映射文件
    "outDir": "./dist", // 输出目录
    "rootDir": "./src", // 输入文件的根目录
    "strict": true, // 启用所有严格类型检查选项
    "noImplicitAny": true, // 禁止隐式的 `any` 类型
    "strictNullChecks": true, // 启用严格的 null 检查
    "strictFunctionTypes": true, // 启用严格的函数类型检查
    "strictBindCallApply": true, // 启用 bind, call 和 apply 的严格检查
    "strictPropertyInitialization": true, // 启用类属性的严格初始化检查
    "noFallthroughCasesInSwitch": true, // 禁止 switch 语句中出现落空情况
    "noUncheckedIndexedAccess": true, // 启用索引访问的严格检查
    "noEmitOnError": true, // 如果有编译错误，则不输出任何文件
    "skipLibCheck": true, // 跳过库文件的类型检查
    "esModuleInterop": true, // 允许以更轻松的方式导入 CommonJS 模块
    "forceConsistentCasingInFileNames": true, // 强制文件名一致性
    "incremental": true, // 启用增量编译
    "moduleResolution": "node", // 指定模块解析策略
    "resolveJsonModule": true, // 允许导入 JSON 文件
    "isolatedModules": true, // 每个文件都是一个单独的模块
    "experimentalDecorators": true, // 启用实验性装饰器
    "emitDecoratorMetadata": true, // 为装饰器提供 metadata
    "suppressImplicitAnyIndexErrors": true, // 抑制隐式 `any` 索引错误
    "baseUrl": "./", // 基础目录，用于相对路径
    "paths": {
      "@/*": ["src/*"] // 配置路径映射，可以使用 @ 符号简化导入
    },
    "typeRoots": [
      "./node_modules/@types", // 指定类型定义文件的位置
      "./custom_typings" // 自定义类型定义文件路径
    ],
    "types": ["node", "jest"] // 指定需要包含的类型定义文件
  },
  
  "include": [
    "src/**/*" // 包含 src 目录下的所有文件
  ],
  
  "exclude": [
    "node_modules", // 排除 node_modules 目录
    "**/*.spec.ts" // 排除所有测试文件
  ],
  
  "extends": "./base-tsconfig.json", // 从其他 TypeScript 配置文件继承配置

  "references": [
    { "path": "./tsconfig.app.json" }, // 指向其他 tsconfig 文件
    { "path": "./tsconfig.lib.json" }
  ]
}

• compilerOptions: 该部分选项控制 TypeScript 编译器的行为和输出。
• include: 指定需要包含的文件或目录。
• exclude: 指定需要排除的文件或目录。
• extends: 允许从其他 tsconfig.json 文件继承配置，这样可以共享设置。
• references: 用于支持项目间的引用，常用于大型应用或模块化项目。

Vite 创建的 Vue 3 项目（ts项目）

在使用 Vite 创建的 Vue 3 项目中，通常会有多个 TypeScript 配置文件，如 tsconfig.json、tsconfig.node.json 和 tsconfig.app.json。它们各自的作用如下：

1. tsconfig.json：

   • 这是项目的主 TypeScript 配置文件，定义了项目整体的 TypeScript 编译选项。它通常包含项目需要的基本配置，如目标 ECMAScript 版本、模块解析方式、类型检查选项等。
   • 这个文件可以用于包括应用的所有源代码，并设置一些全局的编译选项。

2. tsconfig.node.json：

   • 这是专门为 Node.js 环境配置的 TypeScript 配置文件。它通常会包括 Node 特定的选项，比如 moduleResolution、target 以及 types，确保在 Node.js 中运行时的类型准确性。
   • 这个文件常常用于编译 Node.js 代码（如 Vite 插件、构建工具或服务器代码等），帮助确保 Node.js 特有 APIs 的类型支持。

3. tsconfig.app.json：

   • 这是针对应用程序部分的 TypeScript 配置文件。该文件通常会从 tsconfig.json 继承必要的选项，并根据需要进行特定的配置，如排除测试文件或只包含应用程序的源代码。
   • 这个文件通常用于设置应用的特定类型检查规则，如包含的目录、依赖的类型等，确保在应用程序开发过程中的类型安全。

一般添加 TypeScript 配置的建议

• 全局类型和基本设置：如果是全局性的设置，建议在 tsconfig.json 中配置。
• Node.js 相关配置：如果是和 Node.js 运行时相关的类型配置，则可以在 tsconfig.node.json 中进行设置。
• 应用特定的设置：如果是针对应用的特定 TypeScript 设置，或者需要与其它库的兼容性调整，建议在 tsconfig.app.json 中做更改。

以下是一份适用于 Vite + Vue 3 + TypeScript 项目的最佳实践 tsconfig.json 配置。此配置采用了针对开发、构建、类型检查等方面的最佳实践。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // 目标 ECMAScript 版本
    "module": "ESNext", // 使用 ESNext 模块系统
    "lib": ["ESNext", "DOM"], // 包含的库
    "jsx": "preserve", // 保留 JSX，后续使用 Babel 或 Vite 转换
    "declaration": true, // 生成对应的 `.d.ts` 声明文件
    "sourceMap": true, // 生成警告时的源映射
    "outDir": "./dist", // 输出文件目录
    "rootDir": "./src", // 输入文件根目录
    "strict": true, // 启用所有的严格类型检查选项
    "noImplicitAny": true, // 禁止隐式的 `any` 类型
    "strictNullChecks": true, // 启用严格的 null 检查
    "skipLibCheck": true, // 跳过库文件的类型检查，提升编译速度
    "esModuleInterop": true, // 允许从 CommonJS 模块 Default 导入
    "forceConsistentCasingInFileNames": true, // 文件名一致性
    "moduleResolution": "node", // 使用 Node.js 模块解析策略
    "resolveJsonModule": true, // 允许导入 JSON 文件
    "isolatedModules": true, // 每个文件都是一个单独的模块，便于支持 Babel
    "importHelpers": true, // 使用 tslib 来减少重复代码
    "noUnusedLocals": true, // 报告未使用的局部变量
    "noUnusedParameters": true, // 报告未使用的函数参数
    "baseUrl": "./", // 基础目录
    "paths": {
      "@/*": ["src/*"] // 配置路径别名
    },
    "typeRoots": [
      "./node_modules/@types", // 类型定义的默认路径
      "./src/types" // 自定义类型定义文件的路径
    ]
  },
  "include": [
    "src/**/*.ts", // 包含所有 TypeScript 文件
    "src/**/*.vue" // 包含所有 Vue 文件
  ],
  "exclude": [
    "node_modules", // 排除 Node.js 模块
    "dist", // 排除输出目录
    "**/*.spec.ts" // 排除测试文件
  ]
}

tsconfig.node.json

在项目中，通常还会有一个 Node.js 特定的配置文件 tsconfig.node.json，用于处理 Build、Script、Vite 插件等 Node.js 环境下的代码：

{
  "extends": "./tsconfig.json", // 继承主配置文件
  "compilerOptions": {
    "target": "ESNext", // 使用 ESNext 作为目标
    "module": "CommonJS", // 使用 CommonJS 模块导出
    "types": ["node"], // 仅包含 Node.js 类型定义
    "moduleResolution": "node" // 使用 Node.js 模块解析策略
  },
  "include": [
    "scripts/**/*.ts", // 包含所有脚本文件
    "vite.config.ts" // 包含 Vite 配置文件
  ],
  "exclude": [
    "src", // 排除源代码文件
    "node_modules", // 排除 Node.js 模块
    "**/*.spec.ts" // 排除测试文件
  ]
}

tsconfig.app.json

如果你的应用代码有特定的规则，还可以创建一个 tsconfig.app.json 文件：

{
  "extends": "./tsconfig.json", // 继承主配置文件
  "include": [
    "src/**/*.ts", // 包含所有 TypeScript 文件
    "src/**/*.vue" // 包含所有 Vue 文件
  ],
  "exclude": [
    "**/*.spec.ts", // 排除测试文件
    "dist" // 排除输出目录
  ]
}