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 排除,那么该文件仍然会被编译器引入。

相关推荐
WeiXiao_Hyy35 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡1 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone1 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js