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

news2024/12/23 6:37:16

在这里插入图片描述

导读

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

总结

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


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

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

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

相关文章

8.7工作总结

一、我们想自定义一个titileBar出现如下这种情况,发现他原来的titileBar还未隐藏。 后来我尝试修改主题使得他没有主题noActionBar发现也不行,后来我参考原先我看过的项目使用了如下代码 this.getActionBar().hide();发现会报这个错误java.lang.NullPoi…

30.基于XML的声明式事务

基于XML的声明式事务 主要是使用XML去代替注解&#xff0c;来实现起到代替注解的作用&#xff0c;实际使用频率很低 将BookServiceImpl.java中的Transactional注解删除&#xff0c;确保用户余额充足 spring-tx-xml.xml <?xml version"1.0" encoding"UTF-8…

Android AccessibilityService研究

AccessibilityService流程分析 AccessibilityService开启方式AccessibilityService 开启原理 AccessibilityService开启方式 . 在Framework里直接添加对应用app 服务component。 loadSetting(stmt, Settings.Secure.ACCESSIBILITY_ENABLED,1); loadSetting(stmt, Settings.Se…

mybatis-plus的update方法,到底会不会更新null值?看这一篇就够了

普通的设置值。需要传入一个Wrapper对象 默认情况下是不会更新null值的&#xff0c;也就是只更新设置值的字段 LambdaUpdateWrapper<OrderChildRoom> orderChildRoomUpdateWrapper new LambdaUpdateWrapper<>();orderChildRoomUpdateWrapper.set(OrderChildRoo…

【PDF密码】PDF文件不能打印,为什么?

正常的PDF文件是可以打印的&#xff0c;如果PDF文件打开之后发现文件不能打印&#xff0c;我们需要先查看一下自己的打印机是否能够正常运行&#xff0c;如果打印机是正常的&#xff0c;我们再查看一下&#xff0c;文件中的打印功能按钮是否是灰色的状态。 如果PDF中的大多数功…

面试热题(滑动窗口最大值)

给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输出&#xff1a;[3,3,5,…

SpringCloud实用篇1——eureka注册中心 Ribbon负载均衡原理 nacos注册中心

目录 1 微服务1.1 微服务的演变1.2 微服务1.3 SpringCloud1.4 小结 2 服务拆分及远程调用2.1 服务拆分2.2 服务拆分案例2.3 实现远程调用2.4 提供者与消费者 3 Eureka注册中心3.1 Eureka的结构和作用3.2 搭建eureka-server3.3 服务注册3.4 服务发现 4 Ribbon负载均衡4.1 负载均…

ubuntu18.04安装docker及docker基本命令的使用

官网安装步骤&#xff1a;https://docs.docker.com/desktop/install/ubuntu/ docker快速入门教程 Ubuntu-Docker安装和使用 docker官网 docker-hub仓库 1、常用指令 &#xff08;1&#xff09;镜像操作 # ############################# 以nginx为例 docker images docker p…

爬虫010_列表高级_添加_append_extend_修改_查询_in_not int_删除_del_pop_remove---python工作笔记029

然后再来看列表操作 首先添加append方法 然后插入,坐标是要插入的下标,右边是插入的内容 看结果 1,2,3,4,5,6 然后这个extend,是逐个插入,放到后边 然后是修改,直接对下标赋值 看结果</

宝塔面板点击SSL闪退打不开怎么解决?

宝塔Linux面板点击SSL证书闪退如何解决&#xff1f;旧版本的宝塔Linux面板确实存在这种情况&#xff0c;如何解决&#xff1f;升级你的宝塔Linux面板即可。新手站长分享宝塔面板SSL闪退的解决方法&#xff1a; 宝塔面板点击SSL证书闪退解决方法 问题&#xff1a;宝塔Linux面板…

创建独立 Python 环境的工具venv

venv 是一种用于创建独立 Python 环境的工具。这些隔离环境可以具有单独的 Python 软件包版本&#xff0c;以便将一个项目的依赖项与其他项目的依赖项隔离开来。我们建议您在使用 Python 进行本地开发时始终使用每个项目的虚拟环境。 1.使用 venv 命令创建整个 Python 安装的虚…

Vue系列第七篇:Element UI之el-main,el-table,el-dialog,el-pagination,el-breadcrumb等控件使用

本篇实现主页面功能&#xff0c;包括主页面排版布局&#xff0c;学生管理模块实现&#xff0c;后台接口实现等功能。 目录 1.运行效果 1.1登录页面 1.2主页面 1.3学生管理 - 信息列表 1.4学生管理 - 信息管理 1.5学生管理 - 作业列表 1.6学生管理 - 作业管理 2.前端代码…

Spring MVC简介与概述

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

设计模式之六:命令模式(封装调用)

命令模式可以将请求的对象和执行请求的对象解耦&#xff08;实际上是通过命令对象进行沟通&#xff0c;即解耦&#xff09;。&#xff08;个人感觉&#xff0c;这章讲的很一般&#xff09; 按个人理解来讲&#xff1a; 假如需要一个遥控器&#xff0c;遥控器有一个插口可以插上…

Python以及Pycharm保姆级的下载安装教程,看完就懂

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Python的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Python的安装 1.下载地址 2.下载步骤…

UITabBarController上边的线,iOS15

新建的UITabBarController是下面这个样子的。 但是想要的是如下的形式&#xff1a; 查了一下这个要通过 tab.scrollEdgeAppearance 来修改。 具体修改方式如下&#xff1a; let appearance self.tabBar.standardAppearance.copy() appearance.backgroundColor .white appear…

如何通过 WordPress 数据库启用插件?【进不去后台可用】

如果您无法访问 WordPress 后台并需要激活插件以恢复访问权限&#xff0c;则可以通过 WordPress 数据库来实现。本文将向您展示如何使用数据库轻松激活 WordPress 插件。 何时使用数据库激活 WordPress 插件&#xff1f; 许多常见的 WordPress 错误会阻止网站所有者访问 WordP…

SQL Server数据库如何添加mysql链接服务器(Windows系统)

SQL Server数据库如何添加mysql链接服务器&#xff08;Windows系统&#xff09; 一、说明二、下载mysql的odbc驱动三、安装mysql odbc四、配置ODBC4.1 控制面板→ODBC数据源&#xff08;64位&#xff09;→双击打开4.2 添加msql odbc数据源 五、测试添加是否成功六、打开SSMS&a…

SSE技术和WebSocket技术实现即时通讯

文章目录 一、SSE1.1 什么是SSE1.2 工作原理1.3 特点和适用场景1.4 API用法1.5 代码实现 二、WebSocket2.1 什么是WebSocket2.2 工作原理2.3 特点和适用场景2.4 API用法2.5 代码实现 三、SSE与WebSocket的比较 当涉及到实现实时通信的Web应用程序时&#xff0c;两种常见的技术选…