ค้นหาเว็บไซต์

javascript - Vue 3 - การตั้งค่าประเภทสำหรับคอมโพเนนต์และ props ของมันเมื่อถูกใช้เป็นพารามิเตอร์ของฟังก์ชัน

ใน Vue 3 ฉันกำลังสร้างฟังก์ชันที่จะรับอินสแตนซ์ของคอมโพเนนต์และ props ที่จะส่งผ่านไปด้วย ฉันยังใช้ TypeScript อยู่และสงสัยว่าฉันสามารถกำหนดประเภทให้กับพารามิเตอร์เหล่านั้นได้หรือไม่ ตัวอย่างเช่น ฟังก์ชันจะเป็นบางอย่างเช่น:

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

ดังนั้นคำถามของฉันคือ:

  1. ฉันสามารถระบุประเภทสำหรับอินสแตนซ์ของคอมโพเนนต์ได้อย่างไร เหล่านี้จะไม่ได้เป็นคอมโพเนนต์ชนิดเดียวกันเสมอไป แต่ควรจะเป็นคอมโพเนนต์ที่ใช้เพื่อวัตถุประสงค์ที่คล้ายกันอย่างน้อย
  2. จะมีวิธีใดที่ฉันสามารถระบุประเภทสำหรับ props ได้และจำกัดมันให้กับ props ที่จะใช้กับพารามิเตอร์ตัวแรก (component) ได้หรือไม่?

คำตอบ #1

คุณสามารถใช้ฟีเจอร์หลายอย่างที่มีอยู่ใน TypeScript และประเภท Component จาก Vue เพื่อให้ได้การพิมพ์ที่ถูกต้องของคุณ สร้างประเภททั่วไปที่ขยาย Component จากนั้นสรุปตัวเลือก/พร็อพของคอมโพเนนต์โดยใช้ 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"})

หมายเหตุ: สิ่งนี้ยังสื่อถึงคุณสมบัติและยูทิลิตี้ของอินสแตนซ์คอมโพเนนต์ด้วย

บทความที่เกี่ยวข้อง