轉(zhuǎn)到用 Typescript 寫 Vue 應(yīng)用以后，經(jīng)過一輪工具鏈和依賴的洗禮，總算蹣跚地能走起來了，不過有一個(gè)很常用的功能 mixin，似乎還沒有官方的解決方案。

既想享受 mixin 的靈活和方便，又想收獲 ts 的類型系統(tǒng)帶來的安全保障和開發(fā)時(shí)使用 IntelliSense 的順滑體驗(yàn)。

vuejs 官方組織里有一個(gè) 'vue-class-component' 以及連帶推薦的 'vue-property-decorator'，都沒有相應(yīng)實(shí)現(xiàn)。翻了下前者的 issue，有一條掛了好些時(shí)間的待做 feature 就是 mixin 的支持。

也不是什么復(fù)雜的事，自己寫一個(gè)吧。

后注：vue-class-component 6.2.0 開始提供 mixins 方法，和本文的實(shí)現(xiàn)思路相似。

實(shí)現(xiàn)

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 的類構(gòu)造器。同時(shí)通過 Pick 拿到 Vue 的構(gòu)造器上的靜態(tài)方法（extend/mixin 之類），如此才能夠支持下面這段中的真正實(shí)現(xiàn)，通過調(diào)用一個(gè) Vue 的子類構(gòu)造器上的 extend 方法生成新的子類構(gòu)造器。

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

至于 ABC 這個(gè)純粹是類型聲明的體力活了。

使用

實(shí)際使用時(shí):

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