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

Question

Dans Vue3, 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 s'il est possible de saisir ces paramètres. Par exemple, la fonction ressemblerait à : constexample=(component,props)=>{//}; Ma question est donc la suivante : comment spécifier le type de l'instance du composant ? Ce ne sont pas toujours les mêmes composants, mais au moins des composants qui répondent à des objectifs similaires. 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) ?

P粉917406009 · Answer

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
(Comp: T, props: T extends Component ? Partial : never) {
 //....
  }

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

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