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

news2024/7/4 4:32:57

在这里插入图片描述

导读

前面章节,我们讲到过 接口(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(2739

let point3d: Point3d = {  //不会报错,满足了 接口校验规范
    x: 123,
    y: 456,
    click() {
        console.log("实现");
    },
    z: 789
};  

本章节主要讲述了,在 TS 中,class类与 接口【Interfaces】,一起使用的时候,会有怎样的表现形式,以及实用的点是什么。


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/744654.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为什么Mate X3手机屏幕有水也不影响操作?

我知道现在的手机大多都防水,但没想到连折叠屏手机Mate X3在湿水状态下都丝毫不影响操作,现在的华为手机防水都做到这种程度了? 众所周知,如果手机屏幕上有水珠,那么手机的触屏就会变得飘忽不定。 这种“飘忽不定”是…

局域网聊天软件都有哪些?几款常用的局域网聊天软件推荐

随着科技的不断发展,人们在日常生活和工作中越来越需要高效便捷的沟通工具。而局域网聊天软件就是一种在局域网内使用的聊天工具,它能够帮助用户在同一网络内的设备之间进行即时通讯,无需依赖于互联网连接,安全又可靠。下面将为大…

学无止境·MySQL⑥(数据库备份和还原)

数据库备份和还原 备份和还原练习1、创建库和表2、使用mysqldump命令备份数据库中的所有表3、备份booksDB数据库中的books表4、使用mysqldump备份booksDB和test数据库5、使用mysqldump备份服务器中的所有数据库6、使用mysql命令还原第二题导出的book表7、进入数据库使用source命…

“快速批量去除文件夹名称中多余重复文字!轻松实现文件夹改名优化,提升整理效率!“

在日常的电脑使用中,我们常常面临着大量的文件和文件夹需要整理,而其中一个常见的问题就是文件夹名称中存在重复的文字,让整个文件夹结构变得混乱而不易管理。为了解决这一问题,我们自豪地推出了全新的文件夹改名工具,…

华为配置LLDP基本功能

华为配置LLDP基本功能 1.什么是lldp协议 定义 LLDP(Link Layer Discovery Protocol)是IEEE 802.1ab中定义的链路层发现协议。LLDP是一种标准的二层发现方式,可以将本端设备的管理地址、设备标识、接口标识等信息组织起来,并发布给自己的邻居设备,邻居设备收到这些信息后将…

产品新升级!MODBUS/SNMP智能协议转换器

“MODBUS TCP”是一种基于 TCP协议的工业控制设备通信协议,其主要功能是实现现场设备的远程控制。MODBUS TCP采用远程通讯的方式,通过 IP网络进行数据传输,因此其传输速率更快、网络负载更小、灵活性更高。 “ SNMP”是一种用于网络管理的…

如何考过PMP? 备考经历分享

考PMP的目的 周围很多同事、朋友都在学习PMP课程或者已获得证书,在日常工作中发现有些词语已经听不懂,比如项目集、项目组合,比如PM等,为了提升自己也为了能在侃大山时也能参与其中脱离“一清二白”的状态,所以下定决…

0基础学习云计算难吗?

很多人经常会问云计算是什么?云计算能干什么?学习云计算能做什么工作?其实我们有很多人并不知道云计算是什么,小知今天来给大家讲讲学习云计算能做什么。 中国的云计算行业目前正处于快速发展阶段,随着互联网和数字化…

SpringBoot 异常处理机制

SpringBoot中异常处理的流程图 在SpringBoot项目中,如果业务逻辑发生了异常,则首先看发生异常的类中有没有ExceptionHandle能处理,如果能,则执行方法进行处理,如果没有,则去找全局的ControllerAdvice注解…

X2000 Linux 调试VL53L4CD驱动

由于VL53L4CD具有更高的精度,更低的功耗,所以尝试将VL53L4CD移植到X2000上进行测试。 一、下载驱动 en.VL53L4CD_LinuxDriver 二、SDK中加入驱动 1、加入源码 在\module_driver\devices下创建VL53L4CD文件夹,再将\en.VL53L4CD_LinuxDriver…

Cyclo(Ile-Leu),91741-17-2,环(异亮氨酸-亮氨酸)二肽,可以根据实验需求定制

(文章资料汇总来源于:陕西新研博美生物科技有限公司小编MISSwu)​ Cyclo(Ile-Leu),DL-isoleucyl-leucyl anhydride,环(异亮氨酸-亮氨酸)二肽,DL异亮氨酸酰酐 产品结构式: 产品规格:…

10.2.5 【Linux】变量的有效范围

在学理方面,为什么环境变量的数据可以被子程序所引用呢?这是因为内存配置的关系!理论上是这样的: 当启动一个 shell,操作系统会分配一记忆区块给 shell 使用,此内存内之变量可让子程序取用 若在父程序利用…

从User-Agent获取浏览器类型

一、User-Agent User-Agent首部包含一个特征字符串,用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。 二、从User-Agent中获取浏览器类型 1、通过自己编写js代码识别UA字符串中的浏览器类型 function getBrowser…

MobPush 工作台操作指南:查看推送数据

推送概况查询 进入“MobPush”的"概况"模块,查询推送整体的概况 推送详情查询 进入“MobPush”的"推送记录"模块 点击“详情”按钮,查看推送详情情况

请求响应-json参数的接收

JSON参数 JSON参数:JSON数据键名与形参对象属性名(即实体类中的成员变量)相同,定义POJO实体类即可接收参数,需要使用RequestBody标识前端发送JSON格式的数据,要使用POST方法发送请求,因为JSON格…

SpringBoot 项目使用 Elasticsearch 对 Word、Pdf 等文档内容的检索

本文参考自:https://blog.csdn.net/Q54665642ljf/article/details/127701719 本文适用于elasticsearch入门小白,还请大佬能指出我的不足(本人其实也是刚学elasticsearch没多久) 文章目录 一、准备工作1.1 安装ES文本抽取插件1.2 …

文件操作--按字符读写文件

目录 1、读写文件中的字符: 例题1:从键盘键入一串字符,然后把它们转存到磁盘文件上。 例题2:将0-127之间的ASCII字符写到文件中,然后从文件中读出并显示到屏幕上。 例题3:修改例题2判断读出的字符是否为…

【NeRF】相机的内外参是什么?单目相机是如何成像的?

文章目录 【NeRF】相机的内外参是什么?单目相机是如何成像的?1.相机外参2.相机内参 【NeRF】相机的内外参是什么?单目相机是如何成像的? 在做Nerf时对其中的一些原理感到困惑,因而把这些基础理论知识总结下来&#xff…

b站网页版视频投稿接口分析

b站网页版视频投稿接口分析 上传视频逻辑如下:1.预加载2.获取准备上传到服务器的数据3.分片上传(块大小最大为10MB/10485760字节)4.上传完成进行合片 上传封面逻辑如下:投稿视频: B站投稿视频(手稿&#xf…

【深度学习】:用于 GAN 的生成器架构 - 生成人脸

一、说明 生成对抗网络(GAN)是机器学习中一个相对较新的概念,于2014年首次推出。他们的目标是合成与真实图像无法区分的人工样本,例如图像。GAN 应用程序的一个常见示例是通过从名人人脸数据集中学习来生成人工人脸图像。虽然GAN图像随着时间的推移变得更加逼真,但它们的主…