一文弄懂TypeScript中的混合(Mixin)

1.前言

由于TypeScrip中的类不支持多继承,所以引入了混合(Mixin)的特性,可以间接实现多继承的效果。

2.正文

复制代码
// 声明一个汽车类Vehicle,它有drive方法
class Vehicle {
  drive(): void {
    console.log('驾驶')
  }
}

// 声明轿车类Car,它有work方法
class Car extends Vehicle{
  work(): void {
    console.log('上班代步')
  }
}

// 声明越野车类Suv,它有cross方法
class Suv extends Vehicle{
  cross(): void {
    console.log('山地越野')
  }
}

// 声明跨界车类Crossover, 继承Car和Suv,既可以上班代步,也可以山地越野
class Crossover extends Car, Suv{ // 这里ts报错:Classes can only extend a single class. 子类只能继承一个父类

}

以上示例为了实现让Crossover类同时拥有work和cross方法,我们尝试一个类同时继承多个类,ts报错了,下面利用Mixin的特性,来实现这一功能:

复制代码
class Vehicle {
    drive(): void {
      console.log('驾驶')
    }
  }
  
  // 声明轿车类Car,它有work方法
  class Car extends Vehicle{
    work(): void {
      console.log('上班代步')
    }
    getSpace(): void {
        console.log('small');
    }
  }
  
  // 声明越野车类Suv,它有cross方法
  class Suv extends Vehicle{
    cross(): void {
      console.log('山地越野')
    }
    getSpace(): void {
        console.log('big');
    }
  }
  
  // 声明跨界车类Crossover, 继承Car和Suv,既可以上班代步,也可以山地越野
  class Crossover extends Vehicle {
  
  }

  // 这里需要创建需要合并类(Crossover)的同名接口,并继承多个类Car、Suv
  interface Crossover extends Car, Suv {}
  
  applyMixins(Crossover, [Car, Suv])
  
  let crossover = new Crossover()
  
  // 该混合函数摘自TypeScript官方手册,如果derivedCtor和constructors类中存在同名方法,则后者覆盖前者
  function applyMixins(derivedCtor: any, constructors: any[]) {
    constructors.forEach((baseCtor) => {
      Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
        Object.defineProperty(
          derivedCtor.prototype,
          name,
          Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
        );
      });
    });
  }

  crossover.drive() // 驾驶
  crossover.work() // 上班代步
  crossover.cross() // 山地越野
  crossover.getSpace() // big,同名方法getSpace是Suv中的,applyMixins函数传入的第二个参数数组最后一个类是Suv

以上Crossover类通过Mixin实现继承Car和Suv中的方法,并且也继承了第二级类Vehicle中的方法,需要注意的是,对于同名的方法,会存在方法覆盖的问题。

3.拓展

利用Mixin的思想还能做一些有趣的事儿!

复制代码
interface AnimalConfig {
    type: string
    name: string
    voice: string
}

class AnimalSpeak {
    speak(config: AnimalConfig): void {
        const {type, name, voice} = config
        console.log(`${type + name}的叫声是${voice}~`);
    }
    dogSpeak(name: string): void {
        console.log(`小狗${name}的叫声是汪汪~`);
    }
    catSpeak(name: string): void {
        console.log(`小猫${name}的叫声是喵喵~`);
    }
}

function extend<T, U>(to: T, from: U) {
    for (const key in from) {
        ;(to as T & U)[key] = from[key] as any
    }
    return to as T & U
}
const context = new AnimalSpeak()
const instance = AnimalSpeak.prototype.speak.bind(context)

extend(instance, context)

instance({type: '小猫', name: '咪咪', voice: '喵喵'}) // 猫咪咪的叫声是喵喵~

instance.dogSpeak('哮天犬') // 小狗哮天犬的叫声是汪汪~

以上示例中context是AnimalSpeak类的实例对象,instance是一个方法,利用extend方法,将context对象中的属性方法赋值给instance,这样instance既可以当做方法使用,也可以当做对象调用其中的方法,非常灵活!

脚踏实地行,海阔天空飞~

相关推荐
Jacky(易小天)5 小时前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
疯狂的沙粒6 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
张小小大智慧10 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
幼儿园的小霸王11 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒11 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
endingCode16 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
前端百草阁18 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜18 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40418 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html