Vue 3 - Menentukan jenis komponen dan prop apabila menggunakannya sebagai argumen fungsi

Question

Dalam Vue 3, saya sedang mencipta fungsi yang akan menerima tika komponen dan sifat untuk diluluskan. Saya juga menggunakan TypeScript dan tertanya-tanya sama ada saya boleh memasukkan parameter ini. Sebagai contoh, fungsinya akan kelihatan seperti:

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

Jadi soalan saya ialah:

1. Bagaimana untuk menentukan jenis contoh komponen? Ini tidak selalunya komponen yang sama, tetapi sekurang-kurangnya komponen yang mempunyai tujuan yang sama.
2. Adakah terdapat cara untuk saya menentukan jenis prop dan mengehadkannya kepada prop parameter pertama (komponen)?

Answer 1

Anda boleh menggunakan banyak ciri yang disediakan oleh skrip taip dan Component 类型来实现正确的键入，创建一个扩展 Component 的通用类型，然后推断组件选项/props 使用 infer dalam vue, menjadikannya pilihan menggunakan Separa:

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

Nota: Ini juga menyimpulkan sifat dan utiliti contoh komponen