在 Typescript 中使用可被复用的 Vue Mixin功能

转到用 Typescript 写 Vue 应用以后，经过一轮工具链和依赖的洗礼，总算蹒跚地能走起来了，不过有一个很常用的功能 mixin，似乎还没有官方的解决方案。

既想享受 mixin 的灵活和方便，又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验。

vuejs 官方组织里有一个 'vue-class-component' 以及连带推荐的 'vue-property-decorator'，都没有相应实现。翻了下前者的 issue，有一条挂了好些时间的待做 feature 就是 mixin 的支持。

也不是什么复杂的事，自己写一个吧。

后注：vue-class-component 6.2.0 开始提供 mixins 方法，和本文的实现思路相似。

实现

import Vue, { VueConstructor } from 'vue'export type VClass<T> = { new(): T} & Pick<VueConstructor, keyof VueConstructor>/** * mixins for class style vue component */function Mixins<A>(c: VClass<A>): VClass<A>function Mixins<A, B>(c: VClass<A>, c1: VClass<B>): VClass<A&B>function Mixins<A, B, C>(c: VClass<A>, c1: VClass<B>, c2: VClass<C>): VClass<A&B&C>function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> { return c.extend({  mixins: traits })}

声明 VClass<T> 可作为 T 的类构造器。同时通过 Pick 拿到 Vue 的构造器上的静态方法（extend/mixin 之类），如此才能够支持下面这段中的真正实现，通过调用一个 Vue 的子类构造器上的 extend 方法生成新的子类构造器。

function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> { return c.extend({  mixins: traits })}

至于 ABC 这个纯粹是类型声明的体力活了。

使用

实际使用时:

import { Component, Vue } from 'vue-property-decorator'import { Mixins } from '../../util/mixins'@Componentclass PageMixin extends Vue { title = 'Test Page' redirectTo(path: string) {  console.log('calling reidrectTo', path)  this.$router.push({ path }) }}interface IDisposable { dispose(...args: any[]): any}class DisposableMixin extends Vue { _disposables: IDisposable[] created() {  console.log('disposable mixin created');  this._disposables = [] } beforeDestroy() {  console.log('about to clear disposables')  this._disposables.map((d) => {   d.dispose()  })  delete this._disposables } registerDisposable(d: IDisposable) {  this._disposables.push(d) }}@Component({ template: ` <div>  <h1>{{ title }}</h1>  <p>Counted: {{ counter }}</p> </div> `})export default class TimerPage extends Mixins(PageMixin, DisposableMixin) { counter = 0 mounted() {  const timer = setInterval(() => {   if (this.counter++ >= 3) {    return this.redirectTo('/otherpage')   }   console.log('count to', this.counter);  }, 1000)  this.registerDisposable({   dispose() {    clearInterval(timer)   }  }) }}count to 1count to 2count to 3calling reidrectTo /otherpageabout to clear disposables