Vue3中组件使用ref时获取组件类型推导

发布网友发布时间：2024-10-02 10:04

共1个回答

热心网友时间：2024-10-24 12:06

在 Vue3 + ts 开发过程中，我们常常会使用第三方组件库，如 Element-Plus UI 或 Navie UI，它们提供了许多便捷的方法来实现复杂交互。为了给组件添加 ref 并获取其实例，我们通常会执行以下操作：

然而，这样做并未实现 ts 类型推导，违背了我们使用 ts 的初衷。在不传递泛型参数的情况下，drawerRef 被定义为 any 类型，效果如上所示。

为了解决此问题，我们尝试给 const drawerRef = ref() 添加类型定义。起初，将组件传入的方案并未成功，导致错误。但随后，我们意识到使用 typeof 获取组件类型是可行的。在 js 中，typeof 返回运行时的类型；在 ts 中，将 typeof 与类型注释结合使用，会得到 ts 的类型信息。我们将此尝试并观察结果。

尽管我们成功获取了类型，但得到的是组件配置对象的类型，而非期望的组件实例。这时，我们引入了 ts 的工具 InstanceType。借助 InstanceType，我们可以获取一个对象的实例类型。通过此操作，我们最终捕获到了组件暴露的方法，成功获取了所需类型。

为了提升使用便捷性，我们可以将此过程封装为一个 hook。这样，每次调用此 hook 时，无需再重复上述操作，大大提升了开发效率。根据上述理解，我们最终实现了以下封装结果。

至此，我们只需将组件传入此 hook，即可获得带有类型推导的组件实例对象，操作简单且高效。通过以上步骤，我们在 Vue3 中实现了组件使用 ref 时的类型推导，提升了开发质量和效率。