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