当前位置: 首页 > news >正文

TypeScript 中【class类】与 【 接口 Interfaces】的联合搭配使用解读

在这里插入图片描述

导读

前面章节,我们讲到过 接口(Interface)可以用于对「对象的形状(Shape)」进行描述。 本章节主要介绍接口的另一个用途,对类的一部分行为进行抽象。

类配合实现接口

实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,但有时候不同类之间还会存在有一些共有的特性,这时候就可以把共有的特性提取整合为接口(interfaces),用 【implements】 关键字 来实现。这个特性大大提高了面向对象的灵活性。


案例描述:

假设,苹果手机是一个类,安卓手机也是一个类,这时候,苹果手机身上有两个,功能是可以打电话和照相,而安卓手机类身上同样具有这两个功能,这时候,我们就可以考虑,把 共有的方法属性给抽离出来,形成一个单独的接口,而后,安卓手机和苹果手机都可以去实现它。

代码演示:

interface phone {  //共有的打电话功能方法,抽离成一个接口How_to_make_a_phone_call()
}
interface photograph {  //共有的照相方法,抽离成一个接口Camera()
}class ios implements phone, photograph {  //苹果手机的类How_to_make_a_phone_call() {console.log("苹果手机打电话的方式");}Camera(){console.log("苹果手机的照相功能");}
}
class Android implements phone, photograph {  //安卓手机的类How_to_make_a_phone_call() {console.log("安卓手机打电话的方式");}Camera(){console.log("安卓手机的照相功能");}
}let i = new ios()
let A = new Android()
console.log(i.How_to_make_a_phone_call()); //苹果手机打电话的方式
console.log(A.How_to_make_a_phone_call());  //安卓手机打电话的方式
console.log(i.Camera()); //苹果手机的照相功能
console.log(A.Camera());  //安卓手机的照相功能

在 implements 后边可以跟随多个接口,以此来关联多个接口规范。


接口继承接口

上面提到了,implements 后面可以关联多个接口,但是当接口很多的时候,很不利于我们的 编码风格。这时候,就可以利用 接口继承接口,来实现二次封装

注意:区别和上面两套代码对比后的不同。

interface phone {  //共有的打电话功能方法,抽离成一个接口How_to_make_a_phone_call()
}
interface photograph {  //共有的照相方法,抽离成一个接口Camera()
}interface functionality extends phone,photograph{   //接口继承接口addfn() //继承接口后还可以添加新的功能
}class ios implements functionality {  类上面就可以简化,跟随继承后的接口How_to_make_a_phone_call() {console.log("苹果手机打电话的方式");}Camera(){console.log("苹果手机的照相功能"); }addfn(){console.log("苹果手机的新功能");}
}
class Android implements functionality {  //类上面就可以简化,跟随继承后的接口How_to_make_a_phone_call() {console.log("安卓手机打电话的方式");}Camera(){console.log("安卓手机的照相功能");}addfn(){console.log("安卓手机的新功能");}
}let i = new ios()
let A = new Android()
console.log(i.How_to_make_a_phone_call()); //苹果手机打电话的方式
console.log(A.How_to_make_a_phone_call());  //安卓手机打电话的方式
console.log(i.Camera()); //苹果手机的照相功能
console.log(A.Camera());  //安卓手机的照相功能
console.log(i.addfn()); //苹果手机的照相功能
console.log(A.addfn());  //安卓手机的照相功能

接口继承类

前面章节提到过,当我们在声明 class Point 时,除了会创建一个名为 Point 的类之外,同时也创建了一个名为 Point 的类型(实例的类型)

如下案例:

class Point {x: number;y: number;constructor(x: number, y: number) {this.x = x;this.y = y;}click()
}interface Point3d extends Point {  //接口通过  extends 继承了 类z: number;
}//而此时 接口的约束规范里包含了,Point 类类型的校验规则
//所以当我们把这个规则用作于对一个对象的判断约束时,如果不包含 Point 中的属性方法就会报错let point3d: Point3d = {};  //会报错 类型“{}”缺少类型“Point3d”中的以下属性: z, x, yts(2739let point3d: Point3d = {  //不会报错,满足了 接口校验规范x: 123,y: 456,click() {console.log("实现");},z: 789
};  

总结

本章节主要讲述了,在 TypeScript 中,class类与 接口【Interfaces】,搭配一起使用的时候,会有怎样的表现形式,以及实用的点是什么。这在一定程度上,更加提高的我们的编码灵活性,所以这一知识点也值得我们掌握。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

http://www.lryc.cn/news/114601.html

相关文章:

  • JavaWeb 手写Tomcat底层机制
  • Gof23设计模式之组合模式
  • 龙芯积极研发二进制翻译,提升软硬件兼容性,提高LoongArch架构
  • 3天爆肝整理,自动化测试-YAML文件读写实战(超细总结)
  • 算法通关村——透彻理解二分查找
  • PAT(Advanced Level)刷题指南 —— 第六弹(⭐有点难度⭐)
  • 个人对智能家居平台选择的思考
  • 无涯教程-Lua - while语句函数
  • MySql学习3:常用函数
  • 24届近5年江南大学自动化考研院校分析
  • C++ 数组
  • Android LinearLayout dynamic add child ImageView,Glide load,kotlin
  • HTML 是什么?它的全称是什么?
  • ATF(TF-A)安全通告
  • LVS—DR集群的搭建
  • 如何理解容量测试?如何做容量测试?
  • 文件上传漏洞(webshell)
  • .net几行代码音乐API各排行榜 热搜 入库
  • 使用gpt对对话数据进行扩增,对话数据扩增,数据增强
  • 算法练习工程1.2
  • 数字IC流片经历有多重要?怎样才能有流片机会?
  • fontfaceobserver 第三方字体加载优化方案
  • laravel安装composer依赖
  • 问题聚集度Hive SQL
  • Windows11右键菜单
  • 篇十四:观察者模式:对象间的通知与更新
  • Hadoop知识点总结
  • 相关搜索量激增10000%!“芭比周边”产品火爆亚马逊!
  • C高级第四讲
  • Idea小操作