tsconfig.json中typeRoots 和 types 的关系详解

typeRoots 和 types 是 TypeScript 中用于控制类型声明文件加载的两个重要配置项。它们的作用和关系如下：

typeRoots

• 含义：typeRoots 是一个数组，用于指定 TypeScript 查找类型声明文件（.d.ts 文件）的根目录。
• 默认值：默认情况下，TypeScript 会将 node_modules/@types 作为类型声明文件的根目录。
• 作用：当你设置了 typeRoots 时，TypeScript 只会 在这些指定的目录中查找类型声明文件，而不再使用默认的 node_modules/@types。

types

• 含义：types 是一个数组，用于指定 TypeScript 需要加载的类型声明模块的名称。
• 默认值：如果不设置 types，TypeScript 会加载 typeRoots 指定路径下所有的类型声明文件。
• 作用：当你设置了 types 时，TypeScript 会从 typeRoots 指定的路径中，只加载 types 数组中列出的模块的类型声明文件。

typeRoots 和 types 的关系

• typeRoots 指定 “在哪里找” 类型声明文件。
• types 指定 “找哪些” 类型声明文件。
• 如果设置了 typeRoots，但没有设置 types，TypeScript 会加载 typeRoots 指定路径下的所有 类型声明文件。
• 如果设置了 types，但没有设置 typeRoots，TypeScript 会从默认的 node_modules/@types 中加载指定的模块。
• 如果同时设置了 typeRoots 和 types，TypeScript 会从 typeRoots 指定的路径中，加载 types 数组中列出的模块。

实例说明

示例 1：默认情况（不设置 typeRoots 和 types）

假设项目结构如下：

my-ts-project/
├── node_modules/
│   └── @types/
│       └── jquery/
│           └── index.d.ts
├── src/
│   └── index.ts
└── tsconfig.json

tsconfig.json：

{
  "compilerOptions": {}
}

• TypeScript 会自动加载 node_modules/@types 目录下的所有类型声明文件（如 jquery）。

示例 2：设置 typeRoots，但不设置 types

假设项目结构如下：

my-ts-project/
├── typings/
│   └── custom/
│       └── index.d.ts
├── node_modules/
│   └── @types/
│       └── jquery/
│           └── index.d.ts
├── src/
│   └── index.ts
└── tsconfig.json

tsconfig.json：

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./node_modules/@types"]
  }
}

• TypeScript 会从 ./typings 和 ./node_modules/@types 中加载所有 类型声明文件（包括 custom 和 jquery）。

示例 3：设置 types，但不设置 typeRoots

假设项目结构如下：

my-ts-project/
├── node_modules/
│   └── @types/
│       ├── jquery/
│       │   └── index.d.ts
│       └── lodash/
│           └── index.d.ts
├── src/
│   └── index.ts
└── tsconfig.json

tsconfig.json：

{
  "compilerOptions": {
    "types": ["jquery"]
  }
}

• TypeScript 会从默认的 node_modules/@types 中加载 jquery 的类型声明文件，但不会加载 lodash。

示例 4：同时设置 typeRoots 和 types

假设项目结构如下：

my-ts-project/
├── typings/
│   └── custom/
│       └── index.d.ts
├── node_modules/
│   └── @types/
│       ├── jquery/
│       │   └── index.d.ts
│       └── lodash/
│           └── index.d.ts
├── src/
│   └── index.ts
└── tsconfig.json

tsconfig.json：

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./node_modules/@types"],
    "types": ["jquery", "custom"]
  }
}

• TypeScript 会从 ./typings 和 ./node_modules/@types 中加载 jquery 和 custom 的类型声明文件，但不会加载 lodash。

总结

• typeRoots：指定 TypeScript 查找类型声明文件的根目录。
• types：指定 TypeScript 需要加载的类型声明模块的名称。
• 如果设置了 typeRoots，TypeScript 会从这些路径中查找类型声明文件。
• 如果设置了 types，TypeScript 会从 typeRoots 指定的路径中，只加载 types 数组中列出的模块。