10.类型声明文件

类型声明文件的作用是 为已存在的JS库提供类型信息

目录

1  axios中的类型声明文件

2  类型声明文件与普通ts文件的区别

3  vscode中内置的类型声明文件

4  第三方库内置的类型声明文件

5  DefinitelyTyped 提供类型声明文件

6  自定义类型声明文件

6.1  创建给ts用的类型声明文件

6.2  创建给js用的类型声明文件


扫描二维码关注公众号,回复: 16394621 查看本文章

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

猜你喜欢

转载自blog.csdn.net/potato123232/article/details/132045053
今日推荐