Vue 3 - 在用作函数参数时设置组件及其道具的类型答案

【问题标题】：Vue 3 - Setting the type for a component and its props when used as function parametersVue 3 - 在用作函数参数时设置组件及其道具的类型
【发布时间】：2022-11-17 16:09:04
【问题描述】：

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

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

所以我的问题是：

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

【问题讨论】：

对于第一个问题，您可以导入您的组件，然后将其用作这样的类型：(component: typeof YourComponent, props) => {}。我不太明白你的第二个问题
谢谢你。对于第二个问题，上下文是我正在遍历一些对象，我将把组件值传递给“组件”组件。所以像<Component :is="component" v-bind="props"/>。所以对于这个功能，我想制作 props 类型，以便它们是为相应组件定义的道具。这个想法是确保预期的道具通过并理想地获得某种类型提示。希望这是有道理的。
一个非常有趣的问题，我喜欢它，我正在尝试一些代码，希望我能找到解决方案

标签： javascript typescript vue.js vue-component vuejs3

【解决方案1】：

关于第一个问题，解决方法如下：

InstanceType<typeof MyComponent>

关于第二个，您可以执行以下操作：

import MyComponent from "path/to/MyComponent.vue";

type MyComponentProps = InstanceType<typeof MyComponent>["$props"];

使用上面的两种解决方案，您的代码将如下所示：


const example = (component: InstanceType<typeof YourComponent>, props: MyComponentProps) => {
  //
};

【讨论】：

【解决方案2】：

您可以使用 typescript 提供的许多功能和 vue 中的 Component 类型来实现您的正确输入，创建一个扩展 Component 的通用类型，然后使用 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"})

笔记：这也推断出属性和组件实例实用程序

【讨论】：