Vue 3 – Angabe des Typs von Komponenten und Requisiten bei deren Verwendung als Funktionsparameter

Question

In Vue 3 erstelle ich eine Funktion, die eine Instanz einer Komponente und eine zu übergebende Eigenschaft akzeptiert. Ich verwende auch TypeScript und frage mich, ob ich diese Parameter eingeben kann. Die Funktion würde beispielsweise so aussehen:

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

Meine Frage lautet also:

1. Wie spezifiziere ich den Typ der Komponenteninstanz? Dabei handelt es sich nicht immer um die gleichen Komponenten, aber zumindest um Komponenten, die ähnlichen Zwecken dienen.
2. Gibt es für mich eine Möglichkeit, den Typ der Requisite anzugeben und sie auf die Requisite des ersten Parameters (Komponente) zu beschränken?

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

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