TypeScript 是怎么去查找类型定义的?

类型文件分类

我们项目中的类型文件分为两种:一类是第三方库的类型,一类是在项目中的自定义类型。

第三方库的类型

(1)Jquery:这是一个使用js写的库而不是ts。所以我们在ts中使用jquery是没有类型提示的。所以需要下载该库的一个类型包@types/jquery。

(2)react-use:这是一个用ts写的一个库,该库的package.json中含有types字段,即类型文件的入口。所以不用下载类型包。

自定义类型

针对没有类型的某些字段或者库,一般我们会在项目根目录创建 *.d.ts为其声明类型(全局库)。或者我们会在我么的ts、tsx文件中导出某种类型(模块化库)。

结论

那既然定义了这么多类型,ts编译器是如何找到它们的呢?

1. 首先要说的是其实第三方库的类型查找的规则和 node 的包查找是类似的,首先会在当前文件夹找 node_modules,在他下面递归的去查找,如果找不到就会去上层的目录找到 node_modules 目录,再递归查找,直到根目录。

(1)拿Jquery来说,ts编译器会在当前文件夹下的node_modules中找到Jquery,然后在package。json查找 types 属性发现没有。说明这是个js库。然后就去@types下面去找Jquery的类型定义。在package.json中发现有types属性,说明这个文件就是 jquery 类型定义的入口。

(2)拿react-use来说,它是ts写的库,那么这个库的package.json中就含有types属性,就不需要类型包了。

2. 之所以ts编译器会从@types下去找类型包,是tsconfig起了作用。tsconfig下有两个属性typeRoots 、types**,它们的作用是啥?**

typeRoots 默认指向 node_modules/@types,这也就说明了为什么 ts 会去 @types 下面去找类型定义文件,既然这样说明我们也可以手动去调整 ts 的查找路径,比如我们本地用 ts 开发了一个通用的组件库,他的类型定义文件保存在 typings 目录下,那我们可以这么修改:

perl 复制代码
 "typeRoots": ["node_modules/@types","./typings"]

如果不希望自动引入 typeRoots 指定路径下的所有声明模块,那可以使用 types 指定自动引入哪些模块,比如:

json 复制代码
"types" : ["node", "lodash", "express"]

那么就只会引入 node 、lodash、express 这三个声明模块,其它的声明模块则不会被自动引入

3. 接着说 files、include和exclude这三个属性是控制着 ts 编译器的编译范围,他们各自的特点如下:

files 是一个数组,数组的元素可以是相对路径和绝对路径 inclue 和 exclude 属性是一个数组,但是组的元素类似 glob 的文件模式,比如*、?、**/这种通配符的形式 如果同时设置了files和include,那么编译器会把两者指定的文件引入,而 exclude 只会对 include 有效,对 files是无效的,即files指定的文件如果同时被 exclude 排除,那么该文件仍然会被编译器引入。

相关推荐
liaojuajun14 分钟前
可视化地图
开发语言·javascript·ecmascript
真的想不出名儿39 分钟前
登录前验证码校验实现
java·前端·python
小高00740 分钟前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖44 分钟前
Playwright的元素定位器
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
浅浅的学一下1 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f1 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash1 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji34161 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin1 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型