Vue 3 - Spécifier le type de composants et d'accessoires lors de leur utilisation comme paramètres de fonction

Question

Dans Vue 3, je crée une fonction qui acceptera une instance d'un composant et une propriété à transmettre. J'utilise également TypeScript et je me demande si je peux saisir ces paramètres. Par exemple, la fonction ressemblerait à :

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

Ma question est donc :

1. Comment spécifier le type d'instance de composant ? Ce ne sont pas toujours les mêmes composants, mais au moins des composants qui répondent à des objectifs similaires.
2. Existe-t-il un moyen pour moi de spécifier le type d'accessoire et de le limiter à l'accessoire du premier paramètre (composant) ?

Answer 1

Vous pouvez utiliser de nombreuses fonctionnalités fournies par TypeScript et Component 类型来实现正确的键入，创建一个扩展 Component 的通用类型，然后推断组件选项/props 使用 infer in vue, les rendant facultatives en utilisant 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"})

Remarque : Cela déduit également les propriétés et les utilitaires d'instance de composant