【无标题】

tsconfig 中的 include、files、types、typeRoot 字段的作用、意义、区别,何时使用,如何使用,使用方式

Assistant的机器人图片
Assistant

Poe
tsconfig.json 文件中的 include、files、types 和 typeRoots 字段都是用来控制 TypeScript 编译器的行为的。它们的作用和区别如下:

include:
作用: 指定需要编译的文件或目录。
意义: 告诉编译器需要编译哪些文件或目录。
使用方式: 可以使用相对路径或绝对路径,支持通配符。例如: “include”: [“src/**/*”]。
files:
作用: 指定需要编译的具体文件列表。
意义: 与 include 不同,files 是一个明确的文件列表,不支持通配符。
使用方式: 列出需要编译的文件路径,例如: “files”: [“src/main.ts”, “src/app.ts”]。
types:
作用: 指定要包含的类型声明文件(d.ts)。
意义: 告诉编译器在哪里查找类型声明文件。
使用方式: 列出要包含的类型声明文件包的名称,例如: “types”: [“node”, “jest”]。
typeRoots:
作用: 指定类型声明文件的根目录。
意义: 告诉编译器从哪些目录下查找类型声明文件。
使用方式: 列出类型声明文件的根目录,例如: “typeRoots”: [“./node_modules/@types”]。
何时使用:

include: 当你需要指定哪些文件或目录需要被编译时使用。
files: 当你需要明确指定需要编译的文件列表时使用。
types: 当你的项目依赖了一些第三方库,而这些库没有提供类型声明文件时使用。
typeRoots: 当你的项目使用了自定义的类型声明文件时使用。
使用方式:

在 tsconfig.json 文件中添加相应的字段,并配置相应的值。
如果你使用了 IDE 如 Visual Studio Code,你也可以在 IDE 的设置中配置这些选项。
总的来说,include 和 files 用于控制文件的编译范围,而 types 和 typeRoots 用于控制类型声明文件的查找范围。根据项目的具体情况,合理地配置这些选项可以帮助 TypeScript 编译器更好地工作。

include 和 files 同时使用,会冲突吗

Assistant的机器人图片
Assistant

Poe
不会冲突。include 和 files 字段可以同时使用,并且它们的作用是不同的。

include 字段:
用于指定需要编译的文件或文件夹。
支持使用通配符。
如果一个文件被 include 包含,那么它就会被编译。
files 字段:
用于显式地列出需要编译的文件。
不支持使用通配符。
只有在 files 中列出的文件才会被编译。
当 include 和 files 同时使用时,TypeScript 编译器会先编译 files 中列出的文件,然后再编译 include 中包含的文件。

也就是说,如果一个文件同时被 include 和 files 包含,它会被编译两次。但是这并不会导致任何问题,因为编译器会自动跳过重复编译的文件。

因此,您可以根据项目的需求,同时使用 include 和 files 字段来控制文件的编译范围。一般来说,如果您需要编译项目中的所有文件,可以使用 include 字段。如果您只需要编译特定的文件,可以使用 files 字段。

types 和 typeRoots 同时使用会冲突吗

Assistant的机器人图片
Assistant

Poe
不会冲突。types 和 typeRoots 字段可以同时使用,并且它们的作用是不同的。

types 字段:
用于指定要包含的类型声明文件(.d.ts)。
可以指定一个或多个包的名称,例如 “types”: [“node”, “jest”]。
TypeScript 编译器会自动从 node_modules/@types 目录下查找这些包的类型声明文件。
typeRoots 字段:
用于指定类型声明文件的根目录。
可以指定一个或多个目录路径,例如 “typeRoots”: [“./node_modules/@types”, “./src/types”]。
TypeScript 编译器会在这些目录下搜索类型声明文件。
当 types 和 typeRoots 同时使用时,TypeScript 编译器会先从 types 指定的包中查找类型声明文件,如果找不到,再从 typeRoots 指定的目录中查找。

也就是说,types 和 typeRoots 是补充关系,不会产生冲突。

通常情况下,可以只使用 types 字段,让 TypeScript 编译器自动从 node_modules/@types 目录下查找类型声明文件。如果项目中使用了一些自定义的类型声明文件,才需要使用 typeRoots 字段来指定这些文件的位置。

总之,types 和 typeRoots 字段可以同时使用,它们的作用是互补的,不会产生冲突。

举几个具体的例子,说明 types 和 typeRoots 使用场景

Assistant的机器人图片
Assistant

Poe
好的,我来举几个具体的例子来说明 types 和 typeRoots 的使用场景:

使用第三方库,且有类型声明文件 场景: 你的项目使用了 axios 这个 HTTP 客户端库,它有对应的类型声明文件。 使用方式:
json

复制
{
“compilerOptions”: {
“types”: [“axios”]
}
}
这样,TypeScript 编译器就会自动从 node_modules/@types 目录下查找并引入 axios 的类型声明文件。
使用第三方库,但没有类型声明文件 场景: 你的项目使用了一个没有提供类型声明文件的第三方库,比如 jquery。 使用方式:
json

复制
{
“compilerOptions”: {
“types”: [“jquery”]
}
}
这样,即使 jquery 没有提供类型声明文件,TypeScript 也会尝试从 node_modules/@types 目录下查找 jquery 的类型声明文件。
使用自定义的类型声明文件 场景: 你的项目中有一些自定义的类型声明文件,放在 src/types 目录下。 使用方式:
json

复制
{
“compilerOptions”: {
“typeRoots”: [“./src/types”]
}
}
这样,TypeScript 编译器就会在 src/types 目录下查找类型声明文件。
同时使用 types 和 typeRoots 场景: 你的项目既使用了第三方库,也有一些自定义的类型声明文件。 使用方式:
json

复制
{
“compilerOptions”: {
“types”: [“axios”, “jest”],
“typeRoots”: [“./src/types”, “./node_modules/@types”]
}
}
这样,TypeScript 编译器会先从 types 指定的包中查找类型声明文件,如果找不到,再从 typeRoots 指定的目录中查找。
总之,types 用于指定需要包含的类型声明文件,typeRoots 用于指定类型声明文件的根目录。根据项目的需求,可以灵活地使用这两个字段。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gleason.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值