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.hqwc.cn/news/56371.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<van-empty description=““ /> 滚动条bug

使用 <van-empty description"" /> 时&#xff0c;图片出现了个滚动条&#xff0c;图片可以上下滑动。 代码如下&#xff1a; <block wx:if"{{courseList.length < 0}}"><van-empty description"" /> </block> <…

使用toad库进行机器学习评分卡全流程

1 加载数据 导入模块 import pandas as pd from sklearn.metrics import roc_auc_score,roc_curve,auc from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression import numpy as np import math import xgboost as xgb …

Windows同时安装两个版本的JDK并随时切换,以JDK6和JDK8为例,并解决相关存在的问题(亲测有效)

Windows同时安装两个版本的JDK并随时切换&#xff0c;以JDK6和JDK8为例&#xff0c;并解决相关存在的问题&#xff08;亲测有效&#xff09; 1.下载不同版本JDK 这里给出JDK6和JDK的百度网盘地址&#xff0c;具体安装过程&#xff0c;傻瓜式安装即可。 链接&#xff1a;http…

生鲜蔬果小程序的完整教程

随着互联网的发展&#xff0c;线上商城成为了人们购物的重要渠道。其中&#xff0c;小程序商城在近年来的发展中&#xff0c;备受关注和青睐。本文将介绍如何使用乔拓云网后台搭建生鲜果蔬配送小程序&#xff0c;并快速上线。 首先&#xff0c;登录乔拓云网后台&#xff0c;进入…

2023-08-05 LeetCode每日一题(合并两个有序链表)

2023-08-05每日一题 一、题目编号 21. 合并两个有序链表二、题目链接 点击跳转到题目位置 三、题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1&#xff1a; 示例2&#xff1a; 示例3&#xff1a; …

NLP:长文本场景下段落分割(文本分割、Text segmentation)算法实践----一种结合自适应滑窗的文本分割序列模型

NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型压缩算法等 专栏详细介绍:NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型…

Leetcode-每日一题【剑指 Offer 10- I. 斐波那契数列】

题目 写一个函数&#xff0c;输入 n &#xff0c;求斐波那契&#xff08;Fibonacci&#xff09;数列的第 n 项&#xff08;即 F(N)&#xff09;。斐波那契数列的定义如下&#xff1a; F(0) 0, F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 斐波那契数列由 0 和 1 开…

C++20 协程(coroutine)入门

文章目录 C20 协程&#xff08;coroutine&#xff09;入门什么是协程无栈协程和有栈协程有栈协程的例子例 1例 2 对称协程与非对称协程无栈协程的模型无栈协程的调度器朴素的单线程调度器让协程学会等待Python 中的异步函数可等待对象M:N 调度器——C# 中的异步函数 小结 C20 中…

Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆 介绍mermaid下&#xff0c;Flowchat流程图语法。 目录 一.欢迎来到我的酒馆二.什么是mermiad工具三.在vs code中使用mermaid四.基本语法 二.什么是mermiad工具 2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表…

MySQL做分布式锁

分布式锁mysql实现方式 方式1&#xff1a;唯一索引 创建锁表&#xff0c;内部存在字段表示资源名及资源描述&#xff0c;同一资源名使用数据库唯一性限制。多个进程同时往数据库锁表中写入对某个资源的占有记录&#xff0c;当某个进程成功写入时则表示其获取锁成功其他进程由于…

Llama2 评测大公开!知识库场景下能否赶超 ChatGPT?

AIGC 人狂喜&#xff01;最近&#xff0c;Meta AI 发布了大语言模型 Llama2&#xff0c;为大模型的开发者注入了一剂强心针&#xff0c;因为无论从其灵活性、竞争力还是便捷性来看&#xff0c;都有不小的优势。 具体来看&#xff1a; Llama2 为开源产品且可免费商用&#xff0c…

Ref从入门到入土

首先做个对比&#xff1a; 功能一&#xff1a;引用一个值做持久化记忆 场景&#xff1a;清除定时器 import { useRef } from "react" import { useState } from "react" // ref:1.引用一个值 做持久化记忆 // let num useRef(1) // console.log(num.cur…