如何在 VueJS 中创建和扩展抽象 class 组件？

Question

你好吗？

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

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

我想写一个 ABSTRACT CLASS 这样我就可以强制开发人员实现一些方法。

我该怎么做？

我正在考虑创建一个 PURE TYPESCRIPT CLASS 来构建 ABSTRACT CLASS 然后继承它在我的 COMPONENT CLASS...

类似于：

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

但是我怎样才能使用 vue 组件使它工作 class？

Answer 1

vue-class-component can be used to define Vue components as TypeScript classes but it has 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
  }
}

如何在 VueJS 中创建和扩展抽象 class 组件？

How to create and extend a abstract class component in VueJS?

abstract-class

typescript

vue.js

vue-component