Vue 3 - 將元件和道具用作函數參數時指定它們的類型

Question

在 Vue 3 中，我正在建立一個函數，它將接受元件的實例和要傳遞的屬性。我也在使用 TypeScript，想知道是否可以輸入這些參數。例如，該函數將類似於：

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

所以我的問題是：

1. 如何指定元件實例的型別？這些並不總是相同的組件，但至少是用於類似目的的組件。
2. 有沒有辦法讓我指定道具的類型並將其限制為第一個參數（元件）的道具？

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

注意：這也推斷屬性和元件實例實用程式