javascript - Vue 3 - 在用作函数参数时设置组件及其 Prop 的类型

Question

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

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

所以我的问题是:

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

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"})

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