首页 前端知识 TypeScript:使用已有的类型声明文件

TypeScript:使用已有的类型声明文件

2024-08-16 22:08:40 前端知识 前端哥 13 243 我要收藏

在使用TS开发项目时,类型声明文件的使用包括以下两种方式:
1)使用已有的类型声明文件
2)创建自己的类型声明文件

使用已有的类型声明文件,又细分为两种情况:
1)内置类型声明文件
2)第三方库的类型声明文件

使用已有的类型声明文件 - 内置类型声明文件

内置类型声明文件:TS为JS运行时可用的所有标准化内置API都提供了声明文件。

例如,数组的forEach方法:
在这里插入图片描述

按住Ctrl键,再用鼠标左键点击,就跳转到了内置的类型声明文件中,这个就是TS提供的内置类型声明文件:
在这里插入图片描述

例如,内置的类型声明文件lib.dom.d.ts:
在这里插入图片描述

使用已有的类型声明文件 - 第三方库的类型声明文件

目前,几乎所有常用的第三方库都有相应的类型声明文件。

第三方库的类型声明文件有两种存在形式:
1)库自带的类型声明文件
2)由DefinitelyTyped提供的

优先用库自带的,如果没有自带的,再手工下载。TS也是优先使用库自带的类型声明文件。

库自带的类型声明文件

例如,axios自带的类型声明文件index.d.ts:
在这里插入图片描述

这种情况下,正常导入该库,TS就会自动加载库自己的类型声明文件,以提供该库的类型声明。

安装的axios库:
在这里插入图片描述

导入axios库,使用的时候有提示:
在这里插入图片描述

那么,TS怎么知道加载axios的inde.d.ts这个类型声明文件呢?
因为axios这个库有个package.json文件,里边通过typings配置项指明了类型声明文件:
在这里插入图片描述

把鼠标放到typings上面,有提示,意思是除了使用typings指明以外,还可以使用types来指明:
在这里插入图片描述

由DefinitelyTyped提供

DefinitelyTyped是一个github仓库,用来提供高质量的TypeSript类型声明。

https://github.com/DefinitelyTyped/DefinitelyTyped
在这里插入图片描述

可以打开types目录,里边有常用库的类型声明文件:
在这里插入图片描述

在这里插入图片描述

可以通过npm来下载该仓库提供的TS类型声明包,这些包的名称格式为@types/*,例如@types/react
当安装`@types/*类型声明包后,不需要自己手动导入这个类型声明文件,TS也会自动加载该类型声明包,以提供该库的类型声明。

在实际项目开发中,如果你使用的第三方库没有自带的类型声明文件,vscode会给出明确的提示,例如react,可以自己使用npm i -D @types/react这样的方式来下载。

说明:TS会首先查找包本身有没有携带类型声明文件,如果没有,再到node_modules@types目录下查找看有没有同名的。

例如,已经安装了loadash,在导入的时候,提醒没有找到声明文件:
在这里插入图片描述

执行命令npm install --save @types/lodash安装lodash这个库的类型声明文件:
在这里插入图片描述

安装完成后,把鼠标放到lodash上面,提示了类型文件声明的位置:
在这里插入图片描述

打开这个文件:
在这里插入图片描述

现在代码中使用loadash,会有语法提示了:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15803.html
标签
评论
发布的文章

HTML5学习记录

2024-04-29 12:04:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!