0
点赞
收藏
分享

微信扫一扫

Typescript总结(五)——接口

一、认识接口
我们之前声明类型的使用使用的是type来进行声明,除此之外我们也可以使用接口来实现。
在这里插入图片描述
二、接口的可选属性和只读属性
在这里插入图片描述
如上述代码所示,此时我们可以在接口中设置readonly属性和?可选属性。并且在关于接口存在一个不成文的规定,就是在接口定义式,名称前面加上I来表示接口。
三、索引类型
在这里插入图片描述
如上述代码所示,此时对象中的属性名的类型和属性值的类型都相同时,可以将其写成统一的形式,这样称为索引类型。
四、函数类型
在这里插入图片描述
如上述代码所示,我们可以使用接口来定义函数类型,但是一般我们也可以使用type来定义函数类型,具体代码如下所示。
在这里插入图片描述
一般来说在定义函数类型的时候,我们还是使用type来进行定义。
五、接口的继承
在这里插入图片描述
我们都知道类是支持单继承的,但是不支持多继承,但是接口也是支持继承的,不过接口是支持多继承。具体如上图所示,存在ISwimIFly两个接口,我们可以通过IAction来继承他们。
六、接口的实现
在这里插入图片描述
如上图所示,我们通过implements来对接口的实现,并且可以对多个接口进行实现,此时如果有需要传入该接口的地方,都可以将该类传入。
七、交叉类型
之前我们学了联合类型,简单的代码实现如下所示
在这里插入图片描述
那么什么是交叉类型呢?交叉类型就是将不同的类型合并在一起,使用&来表示。
在这里插入图片描述
如上所示,此时所表示的类型为never类型,因为不存在既是number类型的数据,又是string类型的数据。
在这里插入图片描述
如上图所示,如果对两个接口使用交叉类型,则实现的对象必须满足两个 接口。
八、interface和type的区别
interface和type都可以用来定义对象类型。
1、如果是非对象类型,则我们可以使用type来进行定义。比如说directive,Alignment,和一些函数Function
2、如果是对象类型,两者存在一些差别:
type定义类型时,名字是不能重复的,interface是可以重复的,如果重复,则进行叠加在一起。
在这里插入图片描述
在这里插入图片描述
九、字面量赋值
在这里插入图片描述
如上图所示,如果我们在接口中没有定义age属性,但是当我们在赋值的时候增加了age属性,此时就会报错。

// Type '{ name: string; age: number; add(num1: number, num2: number): number; }' 
// is not assignable to type 'IIn'.Object literal may only specify known properties,
//  and 'age' does not exist in type 'IIn'.

解决方法
在这里插入图片描述
我们可以将对象赋值给一个变量,然后再将个变量重新赋值给新对象就不会报错,因为其他变量再进行赋值时会进行freshness擦除操作。

举报

相关推荐

0 条评论