Vue 3 - 将组件和道具用作函数参数时指定它们的类型

Question

在 Vue 3 中，我正在创建一个函数，它将接受组件的实例和要传递的属性。我也在使用 TypeScript，想知道是否可以输入这些参数。例如，该函数将类似于：

const example = (component, props) => {
  //
};

所以我的问题是：

1. 如何指定组件实例的类型？这些并不总是相同的组件，但至少是用于类似目的的组件。
2. 有没有办法让我指定道具的类型并将其限制为第一个参数（组件）的道具？

Answer 1

您可以使用 typescript 提供的许多功能和 vue 中的 Component 类型来实现正确的键入，创建一个扩展 Component 的通用类型，然后推断组件选项/props 使用 infer，使用 Partial 使它们成为可选：

import type { Component } from "vue";

function example<T extends Component>
(Comp: T, props: T extends Component<infer P> ? Partial<P> : never) {
 //....
  }

example(Alert, { variant: "success"})

注意：这也推断属性和组件实例实用程序