ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Typescript总结(五)——接口

2022-02-28 12:30:01  阅读:134  来源: 互联网

标签:总结 Typescript number 接口 所示 类型 type 属性


一、认识接口
我们之前声明类型的使用使用的是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擦除操作。

标签:总结,Typescript,number,接口,所示,类型,type,属性
来源: https://blog.csdn.net/weixin_47450807/article/details/123178189

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有