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

Posted 2023-02-23

【中文标题】如何在 VueJS 中创建和扩展抽象类组件？

【英文标题】：How to create and extend a abstract class component in VueJS?

【发布时间】：2019-11-30 20:09:20

【问题描述】：

你好吗？

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

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

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

我该怎么做？

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

类似：

abstract class AbstractClass 
  public abstract abstractMethod(): void

但是如何使用 vue 组件类来完成这项工作呢？

【问题讨论】：

见github.com/vuejs/vue-class-component。您在实施时遇到问题吗？

当然！我已经检查过了，但是我可以强制开发人员使用它来实现一些方法吗？我想用“抽象方法”

仅当他们也使用 TS 时。

这将有助于解释错误是什么。如果github.com/vuejs/vue-class-component/issues/342 是问题所在，您可能无法克服这个问题。 Tbh，Vue 在其组件背后的所有魔力并不是真正的 OOP 友好。

当然，您可以在构造函数中进行检查。由于您使用的是 TS，因此通过接口强制执行此操作会很有帮助。我发布了一个如何做到这一点的示例。

【参考方案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
  

【讨论】：

嘿伙计！谢谢你的帮助！你能解释一下你在 BaseFooComponent 定义中所做的这个操作是什么吗？我知道你实现了一个抛出异常的默认方法，但你为什么将它定义为“['bar' as string]”？

不客气。是['bar' as string]()，而不是bar()，是为了让它被打字系统丢弃，所以不认为是实现，否则this.bar()不会导致编译错误。