TypeScript Mixins 混入
简介
TS 中Mixins混入类是与vue中的mixins混入语法,简单来说也是对多个对象,类等的合并。
参考:https://www.tslang.cn/docs/handbook/mixins.html
1. 对象混入
在ES6中的语法,Object.assign 可以合并多个对象。
这个合并的对象,在TS中会被推断为一个交叉类型的变量。
// 声明Ia, Ib两种不同接口类型
interface Ia {a: string
}
interface Ib {b: number
}
// 定义两个对应接口类型的变量(对象)
let a: Ia = { a: 'hello a' }
let b: Ib = { b: 1024 }
// 合并两个变量, 该变量则是 string & number 的交叉类型变量
const c = Object.assign(a, b)
2. 类的混入
首先声明两个 mixins 类 (注意关闭严格模式,否则编译不通过)。
class A {a: boolean = false; fnA(): void {this.a = !this.a}
}class B {b: string = 'hello mixins';fnB(): string {return this.b}
}
接下来创建一个类C,来声明合并A和B类在一起的类中的类型。
由于是声明类型,因此将 class 作为接口来 implements 实现这个 mixins 类的声明。
虽然这样提前去定义一些占位属性,比较麻烦,但是这样做的目的是为了将要 mixin 进来的属性方法去创建占位属性,告诉编译器这些成员在运行时是可用的。这样操作后,才能使用 mixin 带来的便利。
class C implements A, B {a: boolean;fnA: () => void;b: string;fnB: () => string
}
最后也就是核心操作,创建帮助函数,来做混入操作。
该帮助函数会遍历 mixins 上所有属性,并复制到目标上去,这样就会把之前的占为属性替换成真正的实现代码。
function Mixins(curClass: any, itemClass: any[]) {itemClass.forEach(item => {Object.getOwnPropertyNames(item.prototype).forEach(name => {curClass.prototype[name] = item.prototype[name]})})
}Mixin(C, [A, B]) //执行混入的帮助函数
这样就可以实现两个类的混入操作了。
提示:Object.getOwnPropertyNames() 该方法是对某个对象下所有属性进行遍历,该对象指的是数组,遍历的是所有属性名,并只保留该对象自身的属性,除去该对象继承来的属性。
TypeScript Mixins 混入相关推荐
- Vue 一秒搞懂mixins混入
在项目开发过程中,你是否会遇到此类问题:在多个组件中用到相同的方法.如果遇到此类问题,那么在多个组件中重复写同样的方法会显得非常繁琐,代码也会不好维护.就此,Vue提供了一个mixins混入的一个概念 ...
- Vue中使用mixins混入
mixins在Vue中的用法 一.mixins混入 混入(mixins)提供了一种非常灵活的方式,来分发vue组件中的可服用功能.一个混入对象可以包含任意的组件选项(vue在script的部分).当组 ...
- TypeScript Mixins 概念介绍
Mixins 除了传统的 OO 层次结构,另一种从可重用组件构建类的流行方法是通过组合更简单的部分类来构建它们. 您可能熟悉 Scala 等语言的 mixin 或特征的想法,并且该模式在 JavaSc ...
- vue2 mixins混入
提取组件公共部分进行封装,达到公用的目的. //A组件 export default {data(){return {show:true}},methods:{toggleShow(){this.sh ...
- Vue — 详解mixins混入使用
前言 当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属 ...
- vue mixins 混入
1.mixins 含义 mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改,mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式. ...
- Mixins混入 TS
1.对象混入 可以使用es6的Object.assign 合并多个对象 interface Name {name: string } interface Age {age: number } inte ...
- 使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts 1 import { Vue, Component, Watch } from "vue-property-decorator" 2 Component.reg ...
- Typescript Mixins(混合)
除了惯例的面对对象的思想,另一种较流行的通过可复用组件创建类的方法是将简单的类混合到一起.你可能对这种混合的方式比较熟悉或对Scala语言的特性有理解,这种模式在JavaScript社区也有一定的人气 ...
最新文章
- 玩远程 可视对讲系统几大新兴应用分析
- 【直播回放】60分钟了解各类图像和视频生成GAN结构
- python读取大文件目录_65.Python读取大文件
- leetcode 235. 二叉搜索树的最近公共祖先 思考分析
- 在SharePoint网站中访问Webservice被拒绝的解决方法
- python 安装wheel .whl文件
- 数组(Array)的常用方法
- 流氓百度乱发短信的经历
- Windows下部署yolov5实现口罩检测
- 买茶叶想到的哪个比较便宜 x1/y1 x2/y2 x代表多少钱 y代表 多少克 无聊的试炼...
- 【服务器】【个人图床】宝塔安装Chevereto
- 参考:创业公司搭建自己的技术架构
- SpringMVC的原理
- Redis 内存碎片
- ai中如何插入签名_如何在PDF文档中插入文本框?
- 已解决:Torch not compiled with CUDA enabled
- matlab 中值滤波 medifit,基于多级中值滤波-提升小波技术的图像去噪
- visio2013 如何快速画出所有箭头
- JPEG简易文档V2.11
- 国庆福利赠书,书籍全部包邮送!