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

在使用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,会有语法提示了:
在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值