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

相关推荐
用户47949283569151 分钟前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥7 分钟前
前端开发,一句话生成网站
前端
Younglina28 分钟前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员29 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
卖火箭的小男孩31 分钟前
# Flutter Provider 状态管理完全指南
前端
小雨青年31 分钟前
鸿蒙 HarmonyOS 6|ArkUI(01):从框架认知到项目骨架
前端
Null15534 分钟前
浏览器唤起本地桌面应用(基础版)
前端·浏览器
哈__38 分钟前
React Native 鸿蒙跨平台开发:PixelRatio 实现鸿蒙端图片的高清显示
javascript·react native·react.js
wszy18091 小时前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos
pas1361 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js