第二十节: TypeScript混入Mixins

混入Mixins

混入（Mixins）是面向对象编程中的一个比较重要的概念。

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

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

1. 简单的对象混入

mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上。

例如:

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 对象原有的属性值。

2. 创建工厂函数混入

该模式依赖于使用具有类继承的泛型来扩展基类。TypeScript 最好的 mixin 支持是通过类表达式模式完成的。

通过创建工厂函数,为类混入其他成员信息

例如:

// 基类
class Base {
    name =  '';
    age = 0;

    constructor(name:string){
        this.name = name
    }
}

// Mixin工厂函数,它返回一个扩展基类的类表达式
type Constructor = new (...arg:any[]) => {}

function Scale<TBase extends Constructor>(Base:TBase){

    // mixin 通过setters 和getters 新增了scale属性
    // 定义了私有属性
    return class Scaling extends Base{
        // 属性
        _scale= 1;

        setScale(scale:number){
            this._scale = scale
        }

        get scale():number{
            return this._scale
        }

    }
}

// 创建一个类,该类代表应用`mixins`和基类
const Person = Scale(Base)

// 实例化
const student = new Person('Bird')
console.log('student', student)
/*
  {
    age: 0
    name: "Bird"
    _scale: 20
    scale: 20
  }
*/

// 设置_scale值
student.setScale(20)
// 获取_scale值
console.log(student.scale)

3. 拷贝基类属性方法混入

例如

// Disposable 混入类
class Disposable {
  isDisposed!: boolean
  dispose() {
    this.isDisposed = true
  }
}

// Activatable 混入类
class Activatable {
  isActive!: boolean;
  activate() {
    this.isActive = true
  }
  deactivate() {
    this.isActive = false
  }
}

// 扩展类
class SmartObject implements Disposable,Activatable{
  constructor() {
    setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500)
  }

  interact() {
    this.activate()
  }


  // 主要作用是告诉TypeScript 已经实现 这些属性和方法,不报错
  // 具体的属性值和方法 ,通过拷贝的方式, 从基类中获取过来
  // 实现Disposable 成员
  isDisposed: boolean = false
  dispose!: () => void
  // 实现 Activatable成员
  isActive: boolean = false
  activate!: () => void
  deactivate!: () => void
}

// 混入基类的属性和方法
function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name]
    })
  })
}

// 混入方法, 将基类中的属性方法,克隆到扩展类中
applyMixins(SmartObject, [Disposable, Activatable])

// 实例化扩展类
let smartObj = new SmartObject()
setTimeout(() => smartObj.interact(), 2000)