1

如何在 vue-class-component 中同时使用基类和 mixin？

直接在模板中绑定来自 mixin 的函数可以正常工作，但是尝试在 typescript 代码中使用这些函数会在编译时导致错误。

据我了解，要使用 mixins，您必须从它们扩展：

class MyComp extends mixins(MixinA, MixinB)

不幸的是，我已经有一个基类，所以这不是一个选择。这是我的代码......有没有办法用 vue-class-component 做到这一点？

// mixin
@Component
export default class DownloadService extends Vue {
  public downloadModel(id: string) {
    alert('Downloading.');
  }
}

// Base class
@Component({
  props: {
    id: String
  }
})
export default class BaseCard extends Vue {
  id: string;

  protected delete() {
    alert('Deleted');
  }
}


// Child class
@Component({
  props: {
    id: String,
    disabled: Boolean,
  },
  mixins: [DownloadService],
})
export default class ItemCard extends BaseCard {
  protected clicked() {
    // Causes error = S2339: Property 'downloadModel' does not exist on type 'ItemCard'.
    this.downloadModel(this.id);
  }
}

请注意，我可以在需要时将“this”转换为，这将起作用，但如果我必须在所有地方都这样做，这似乎有问题：

  protected clicked() {
    // Ideally shouldn't have to do this casting everywhere. 
    (<DownloadService><any>this).downloadModel(this.id);
  }
4

1 回答 1

2

You indeed can't extend multiple classes. However, TypeScript also supports mixins.

First you'd have to implement the mixin class:

// Child class
@Component({
  props: {
    id: String,
    disabled: Boolean,
  },
  mixins: [DownloadService],
})
export default class ItemCard extends BaseCard implements DownloadService {
  protected clicked() {
    this.downloadModel(this.id);
  }

  // DownloadService declaration
  public downloadModel: (id: string) => void;
}

And then call a function that applies the mixin to your class:

applyMixins(ItemCard, [DownloadService]);

The function applyMixins is a function you have to include somewhere in your runtime:

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

See the TypeScript documentation on mixins for more info: https://www.typescriptlang.org/docs/handbook/mixins.html

Another option is to use the ECMAScript 2015 mixin class pattern, which is also supported since TypeScript 2.2.

You first have to define a type somewhere for a construct signature for a specific type:

type Constructor<T> = new(...args: any[]) => T;

Then create a function that returns a new class with your mixin functionality:

function Downloadable<T extends Constructor<{}>>(Base: T) {
  return class extends Base {
    public downloadModel(id: string) {
      alert('Downloading.');
    }
  }
}

Then you'd still need a class with the @Component decorator to define the mixin for Vue:

// mixin
@Component
export class DownloadService extends Downloadable(Vue) {
}

Finally you can define the class where you apply the mixin to the base class:

// Child class
@Component({
  props: {
    id: String,
    disabled: Boolean,
  },
  mixins: [DownloadService],
})
export default class ItemCard extends Downloadable(BaseCard) {
  protected clicked() {
    this.downloadModel(this.id);
  }
}
于 2018-08-15T08:41:34.867 回答