首页 前端知识 TypeScript Mixins 混入

TypeScript Mixins 混入

2024-05-26 00:05:34 前端知识 前端哥 20 673 我要收藏

简介

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() 该方法是对某个对象下所有属性进行遍历,该对象指的是数组,遍历的是所有属性名,并只保留该对象自身的属性,除去该对象继承来的属性。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9538.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!