TypeScript 混入(Mixins)

优质

小牛编辑

167浏览

2023-12-01

混入（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!: boolean
  dispose() {
    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()
  }

  // Disposable
  isDisposed: boolean = false
  dispose!: () => void
  // Activatable
  isActive: boolean = false
  activate!: () => void
  deactivate!: () => 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!: boolean
  dispose() {
    this.isDisposed = true
  }
}

// Activatable Mixin
class Activatable {
  isActive!: boolean
  activate() {
    this.isActive = true
  }
  deactivate() {
    this.isActive = false
  }
}

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

class SmartObject implements Disposable, Activatable {}

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

  // Disposable
  isDisposed: boolean = false
  dispose!: () => void
  // Activatable
  isActive: boolean = false
  activate!: () => void
  deactivate!: () => 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. 小结

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