TypeScript 怎么去查找类型定义的?
- 类型文件分类
- 第三方库的类型
- 自定义类型
- 结论
类型文件分类
我们项目中的类型文件分为两种:一类是第三方库的类型,一类是在项目中的自定义类型。
第三方库的类型
(1)Jquery:这是一个使用js写的库而不是ts。所以我们在ts中使用jquery是没有类型提示的。所以需要下载该库的一个类型包@types/jquery。
(2)react-use:这是一个用ts写的一个库,该库的package.json中含有types字段,即类型文件的入口。所以不用下载类型包。
自定义类型
针对没有类型的某些字段或者库,一般我们会在项目根目录创建 *.d.ts为其声明类型(全局库)。或者我们会在我么的ts、tsx文件中导出某种类型(模块化库)。
结论
那既然定义了这么多类型,ts编译器是如何找到它们的呢?
- 首先要说的是其实第三方库的类型查找的规则和 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属性,就不需要类型包了。 - 之所以ts编译器会从@types下去找类型包,是tsconfig起了作用。tsconfig下有两个属性typeRoots 、types,它们的作用是啥?typeRoots 默认指向 node_modules/@types,这也就说明了为什么 ts 会去 @types 下面去找类型定义文件,既然这样说明我们也可以手动去调整 ts 的查找路径,比如我们本地用 ts 开发了一个通用的组件库,他的类型定义文件保存在 typings 目录下,那我们可以这么修改:
"typeRoots": ["node_modules/@types","./typings"]
如果不希望自动引入 typeRoots 指定路径下的所有声明模块,那可以使用 types 指定自动引入哪些模块,比如:
"types" : ["node", "lodash", "express"]
那么就只会引入 node 、lodash、express 这三个声明模块,其它的声明模块则不会被自动引入
- 接着说files、include和exclude这三个属性是控制着 ts 编译器的编译范围,他们各自的特点如下:
files 是一个数组,数组的元素可以是相对路径和绝对路径
inclue 和 exclude 属性是一个数组,但是组的元素类似 glob 的文件模式,比如*、?、**/这种通配符的形式
如果同时设置了files和include,那么编译器会把两者指定的文件引入,而 exclude 只会对 include 有效,对 files是无效的,即files指定的文件如果同时被 exclude 排除,那么该文件仍然会被编译器引入。