typescript - 如何在 VueJS 中创建和扩展抽象类组件？

Question

你最近怎么样？

所以，我一直在为我工作的公司做一个新项目。

我们将开发一个 SDK 以提供给我们的第三方开发人员类，以便他们可以构建在我们的应用程序中运行的组件。

我想写一个抽象类所以我可以强制开发人员实现一些方法。

我怎样才能做到这一点？

我正在考虑创建一个 纯字体类 建立抽象类然后在我的 中继承它组件类 ...

就像是:

abstract class AbstractClass {
  public abstract abstractMethod(): void
}

但是我怎样才能使用 vue 组件类来完成这项工作呢？

Answer 1

vue-class-component 可用于将 Vue 组件定义为 TypeScript 类，但它具有 a limitation关于抽象类。

根据应该如何使用抽象方法，可以添加额外的检查以在子组件中强制执行它们，例如:

interface IFooComponent {
  bar(): void;
}

@Component({})
class BaseFooComponent extends Vue {
  ['bar' as string]()  {
    throw new Error('not implemented');
  }
}

// `implements` causes compilation error
class FooComponent extends BaseFooComponent implements IFooComponent {
  // bar() {}

  mounted() {
    this.bar(); // causes both compilation and runtime error
  }
}