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

相关推荐
এ慕ོ冬℘゜31 分钟前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
hoLzwEge40 分钟前
拯救低效调试!code-inspector-plugin 让代码定位如虎添翼
前端·前端框架·node.js
xqslsm41 分钟前
TypeScript 联合类型深入解析
typescript
J船长1 小时前
烂笔头扫盲:LLM Eval 入门:从「感觉挺好」到「数据说话」的工程化落地
前端
skiyee1 小时前
被多个 UView 系 UI 库 “抄” 的 @uni-ku/root 究竟怎么实现?
前端
鱼毓屿御1 小时前
从「只会聊」到「边想边做」的跃迁
前端·学习·react.js
sugar__salt2 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军2 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
SmartBoyW2 小时前
CSS弹性布局(Flexbox)学习笔记:从零开始搞懂弹性布局
前端·javascript
用户69371750013842 小时前
从代码生产者到 AI 协作者:软件工程师的角色重构
android·前端·后端