类型声明文件的作用是 为已存在的JS库提供类型信息
目录
1 axios中的类型声明文件
2 类型声明文件与普通ts文件的区别
3 vscode中内置的类型声明文件
4 第三方库内置的类型声明文件
5 DefinitelyTyped 提供类型声明文件
6 自定义类型声明文件
6.1 创建给ts用的类型声明文件
6.2 创建给js用的类型声明文件
1 axios中的类型声明文件
我们以axios作为例子,比如这里的url,它就提示我们需要给一个字符串类型的值
有提示的原因是axios中有类型声明文件
2 类型声明文件与普通ts文件的区别
.d.ts文件就是类型声明文件。其中d的意思是declaration。
类型声明文件只能有声明代码,不能有执行代码,写了就会报错
在ts中可以有执行代码
.ts文件可以被编译为js文件。.d.ts文件不会被编译为js文件
3 vscode中内置的类型声明文件
无论你写js
还是ts
都会有关于内置方法的提示,我们可以 ctrl + 左键点击这个方法,点击后会看到lib.es5.d.ts。这个就是vscode内置的类型声明文件之一
内置文件不只有一个,当我们使用DOM的时候也有对应的内置类型声明文件
同样用ctrl+左键点击,可以看到lib.dom.d.ts文件
4 第三方库内置的类型声明文件
我们可以在下载好的包中通过 package.json 查看这个包使用的类型声明文件
除了可以使用typings这个属性,也可以使用 types 这个属性
5 DefinitelyTyped 提供类型声明文件
DefinitelyTyped是一个github仓库,项目地址 https://github.com/DefinitelyTyped/DefinitelyTyped ,在这个库中有我们常用的库的类型声明文件
有的第三方包是不自带类型声明文件的,比如lodash,我们先安装lodash
在lodash中的package.json中没有types这个属性
没有类型声明文件就没有提示
这个时候我们可以使用 DefinitelyTyped ,在安装的时候在想要安装的库前加上 @types/
下载后会在node_modules产生@types这个文件夹,里面有lodash。之前的lodash我们可以用 npm uninstall lodash 删掉,也可以不删
- 卸载后按照下面方式导入并使用,我测过可以用
在 @types/lodash 中的package.json有类型声明文件
导入的时候我们导入 @type/lodash ,然后再写就发现有提示了
不一定所有的库在DefinitlyTyped中都有,你进入项目后点击types
打开后告诉你有7653个库能用
6 自定义类型声明文件
6.1 创建给ts用的类型声明文件
直接用export与import导出导入就行了,首先创建d.ts与ts,文件名称均自定
在index.d.ts中声明一个类型并导出
在test.ts中导入并使用
6.2 创建给js用的类型声明文件
业务代码就不要动他了,我们需要动的是工具代码,比如 格式化时间 这些
我当前有这样一个js文件
我可以把js文件导入另一个js中,然后使用。可以使用,但是没有类型约束
我们希望有类型约束,所以我们需要创建js的同名的d,ts文件
- package.json的作用是能让终端使用import
把你希望约束的js代码给上约束
- 想interface,type这种ts独有的关键字,如果你需要导出的话,你不需要使用declare,直接导出就行了,当然你想用declare也可以
- js中用let声明的,那你规则就用let声明。js中用const声明的,你规则就用const声明。总之是js中用什么,你规则就用什么
之后你再就发现有提示了
并且可以正常使用
由于使用的是js,js只是有提示,但是并不会报错,如果你需要有报错的那种,你要使用ts
ts确实是有报错,但是你在最后上线的时候会麻烦一些。
如果你直接使用tsc将ts转为js是用不了的,因为tsc默认的导入方式是commonjs,我使用tsc --init整了一会儿也没整好
你也可以使用ts-loader将项目变为ts项目,这个视频是使用webpack来搞的ts项目,感兴趣可以看一下 P74 06-创建自己的类型声明文件(2为已有JS文件提供类型声明的概述)_哔哩哔哩_bilibili