在使用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,会有语法提示了: