31.【TypeScript 教程】混入(Mixins)

TypeScript 混入(Mixins)

混入(Mixins)是面向对象编程中的一个比较重要的概念。本节将会通过一个实例逐步介绍混入是如何在 TypeScript 中使用的。

1. 解释

在 TypeScript 中,可以根据不同的功能定义多个可复用的类,它们将作为 mixins。因为 extends 只支持继承一个父类,我们可以通过 implements 来连接多个 mixins,并且使用原型链连接子类的方法和父类的方法。

这就像组件拼合一样,由一堆细粒度的 mixins 快速搭建起一个功能强大的类。

2. 简单的对象混入

先来看一个基础例子:

let target = {  a: 1,  b: 1 }
let source1 = {  a: 2,  c: 3 }
let source2 = {  b: 2,  d: 4 }Object.assign(target, source1, source2)console.log(target) // { a: 2, b: 2, c: 3, d: 4 }

解释: 通过 Object.assign() 将 source1 与 source2 混入到 target 上,并且替换了 target 对象原有的属性值。

3. TypeScript Mixins

先介绍一个前置知识: Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

3.1 代码演示

下面的代码演示了如何在 TypeScript 中使用混入:

// Disposable Mixin
class Disposable {isDisposed!: booleandispose() {this.isDisposed = true}
}// Activatable Mixin
class Activatable {isActive!: boolean;activate() {this.isActive = true}deactivate() {this.isActive = false}
}class SmartObject{constructor() {setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500)}interact() {this.activate()}// DisposableisDisposed: boolean = falsedispose!: () => void// ActivatableisActive: boolean = falseactivate!: () => voiddeactivate!: () => void
}
applyMixins(SmartObject, [Disposable, Activatable])let smartObj = new SmartObject()
setTimeout(() => smartObj.interact(), 2000)function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name]})})
}

3.2 逐步解析这个例子

代码里首先定义了两个类,它们将做为 mixins。可以看到每个类都只定义了一个特定的行为或功能。稍后我们使用它们来创建一个新类,同时具有这两种功能。

// Disposable Mixin
class Disposable {isDisposed!: booleandispose() {this.isDisposed = true}
}// Activatable Mixin
class Activatable {isActive!: booleanactivate() {this.isActive = true}deactivate() {this.isActive = false}
}

下面使用 implements 连接多个父类,需要在子类里实现所有接口定义。

class SmartObject implements Disposable, Activatable {}

这么做是为将要 mixin 进来的属性/方法创建出占位属性。这告诉编译器这些成员在运行时是可用的,这样就能使用 mixin 带来的便利,虽说需要提前定义一些占位属性。

  // DisposableisDisposed: boolean = falsedispose!: () => void// ActivatableisActive: boolean = falseactivate!: () => voiddeactivate!: () => void

子类对外暴露一个封装后的 public 方法,方法的具体实现可以借助混入的 mixins 类中的属性/方法:

  interact() {this.activate()}

最后,把 mixins 混入定义的类,完成全部实现部分。

applyMixins(SmartObject, [Disposable, Activatable])

applyMixins() 方法借助 Object.getOwnPropertyNames() 遍历 mixins 上的所有属性,并复制到目标上去,把之前的占位属性替换成真正的实现代码。

function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name]})})
}

applyMixins() 这个工具函数可以封装在项目中一个核心函数库中。

4. 小结

混入这种思想在一些开源项目如 materialvue-class-component 中被广泛使用,我们日常工作中也可以根据需求借鉴使用。

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

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

相关文章

【python】爬取豆瓣影评保存到Excel文件中【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 【往期相关文章】 爬取豆瓣电影排行榜Top250存储到Excel文件中 爬取豆瓣电影排行榜TOP250存储到CSV文件中 爬取知乎热榜Top50保存到Excel文件中 爬取百度热搜排行榜Top50可视化 爬取斗鱼直播照片保存到本地目录 爬…

仓储管理系统——软件工程报告(详细设计)④

详细设计 一、系统功能模块的划分 根据系统的功能性需求,本文将部队仓库管理系统分为以下六大模块:系统管理模 块、基础数据模块、出入库管理模块、库存管理模块、仓库信息管理模块、作业管理模 块,每个模块内部又分为很多小功能模块&#…

win10+elasticsearch8.12 安装教程

Elasticsearch是一种搜索引擎,本地安装完成之后,可使用其他编程语言(例如python)与elasticsearch建立连接,然后使用python脚本搜索elasticsearch中的数据 1下载 elasticsearch elasticsearch最新版官网下载链接 点击…

颠覆式创新:LAXCUS分布式操作系统7.0

在这轮AI浪潮中,英伟达已经获得了硬件算力入口,Laxcus要获取软件算力入口。 有几位网友想了解我们正在研发的Laxcus分布式操作系统7.0的情况。应他们要求,今天就说说Laxcus 7.0版本。Laxcus 7.0是一个全新的操作系统,具有很多独特…

Redis在生产环境中可能遇到的问题与解决方案(一)

Redis是一款高性能的内存数据库,广泛应用于生产环境中,但在实际应用中也会遇到一些问题。本文将详细探讨Redis在生产环境中可能遇到的问题,并提供相应的解决方案,以确保系统的稳定性和性能。 1. 内存耗尽 问题描述 在高负载情况…

uni-app 国际化

vue i18n v9的迁移后的$t()无法获取数组、对象 http://t.csdnimg.cn/WkCHy api:vue i18n [intlify] Not found ‘language’ key in ‘zh-Hans’ locale messages. [intlify] Fall back to translate ‘language’ key with ‘zh’ locale. [intlify] Not found ‘languag…

快速数论变换NTT学习笔记

什么是NTT? 数论变换(number-theoretic transform, NTT)是离散傅里叶变换(DFT)在数论基础上的实现。 NTT是一种计算卷积的快速算法,FFT也是其中一种。 但是FFT具有一些实现上的缺点,举例来说&…

C++技术要点总结, 面试必备, 收藏起来慢慢看

目录 1. 语言对比 1.1 C 11 新特性 2.2 C 和 C 的区别 2.3 Python 和 C 的区别 2. 编译内存相关 2.1. C 程序编译过程 2.2. C 内存管理 2.3. 栈和堆的区别 2.4. 变量的区别 2.5. 全局变量定义在头文件中有什么问题? 2.6. 内存对齐 2.7. 什么是内存泄露 …

ISO27001认证:企业与个人发展的必备之选

ISO27001认证,对于企业和个人来说,都具有极高的价值和重要性。作为国际权威的信息安全管理体系标准,它为企业提供了保障信息安全、防范风险和提升竞争力的有力工具。 💼对企业的价值: ISO27001认证可以帮助企业满足国家…

【通过docker安装常用软件镜像】1.镜像 2.安装 redis,jdk,nginx

1)官网镜像网站 hello-world - Official Image | Docker Hub 2)安装镜像测试例子 Redis 1.查询redis [rootlocalhost ~]# docker search redis NAME DESCRIPTION STARS OFFICIAL redis …

安全产品与等级保护:匹配与选择指南

基本要求项测评项基本措施对应产品网络架构应保证网络各个部分的带宽满足业务高峰期需要;带宽管理流量控制系统应避免将重要网络区域部署在边界处,重要网络区域与其他网络区域之间应采取可靠的技术隔离手段;网络及安全设备配置访问控制策略防…

rancher和k8s接口地址,Kubernetes监控体系,cAdvisor和kube-state-metrics 与 metrics-server

为了能够提前发现kubernetes集群的问题以及方便快捷的查询容器的各类参数,比如,某个pod的内存使用异常高企 等等这样的异常状态(虽然kubernetes有自动重启或者驱逐等等保护措施,但万一没有配置或者失效了呢)&#xff0…

数智化招标采购平台核心功能采购监管系统能做到哪些管控?

郑州信源数智化招标采购平台系统研发商,覆盖全业务类型、全采购流程、全采购方式,核心系统需求计划、电子招投标、非招标管理、供应商管理、采购监管、基础库、订单协同、电子商城、大数据辅助决策等功能,重构采购业务流程,赋能政…

matlab对负数开立方根得到虚数的解决方案

问题描述:在matlab中,对负数开立方根,不出意外你将得到虚数。 例如 − 27 3 \sqrt[3]{-27} 3−27 ​,我们知道其实数解是-3,但在matlab中的计算结果如下: 问题原因:matlab中的立方根运算是在…

【iOS ARKit】人脸检测追踪基础

在计算机人工智能(Artificial Inteligence,AI)物体检测识别领域,最先研究的是人脸检测识别,目前技术发展最成熟的也是人脸检测识别。人脸检测识别已经广泛应用于安防、机场、车站、闸机、人流控制、安全支付等众多社会领域&#x…

提高供电可靠性:配网故障定位装置的实际应用与效果

随着电力系统的不断发展,提高供电可靠性成为了业界关注的焦点。在这个过程中,恒峰智慧科技研发的配网故障定位装置发挥着越来越重要的作用。本文将详细介绍一种基于行波测距技术的配网故障定位装置HFP-GZS1000,以及其在实际应用中的效果。 一…

3d gaussian splatting介绍整理

3D 高斯分布是用于实时辐射场渲染的 3D 高斯分布中描述的一种光栅化技术,它允许实时渲染从小图像样本中学习到的逼真场景。 paper github 本文翻译整理自: blog: Introduction to 3D Gaussian Splatting DDPMs - Part 2 给出一些2D图片,用…

2401llvm,clang的libtooling

LibTooling(库工具) LibTooling是个支持基于Clang编写独立工具的库. 在此,为LLVM安装Clang工具 介绍 用LibTooling构建的工具(如Clang插件)通过代码运行FrontendActions. 这里演示运行Clang的快速检查一堆代码语法的SyntaxOnlyAction的不同方法. 解析内存中的代码片 如果想…

PyTorch 添加 C++ 拓展

参考内容:pytorch添加C拓展简单实战编写及基本功能测试 文章目录 第一步:编写 C 模块test.htest.cpp 第二步:编写 setup.py第三步:安装 C 模块第四步:验证安装第五步:C 模块使用test_cpp1.pytest_cpp2.py 运…

信息安全认证首选CISP-PTE

🔥在信息安全领域,CISP-PTE认证正逐渐成为行业的新星。作为中国信息安全测评中心推出的专业认证,CISP-PTE为信息安全从业者提供了国内Z高标准的资质培训。 🎯为什么选择CISP-PTE? 1️⃣业界认可:CISP-PTE是…