vue.js - ใช้ประเภท TypeScript ใดในการส่งคลาสในคำจำกัดความ prop ของ script setup ใน Vue 3?

ฉันมีคอมโพเนนต์ไฟล์เดียวของ Vue 3 ที่ใช้วิธีการ script setup ซึ่งหนึ่งใน props ที่ฉันต้องการกำหนดจะรับค่าที่เทียบเท่ากับแอตทริบิวต์ class ซึ่งหมายความว่าค่าของ prop อาจเป็นสตริง, นิพจน์, อาร์เรย์ หรืออ็อบเจ็กต์ ปัญหามาเกิดเมื่อฉันพยายามใช้ withDefaults() เพื่อกำหนดค่าเริ่มต้นเป็นสตริงว่างให้กับ prop นี้

withDefaults(
  defineProps<{
    itemClass?: unknown
  }>(),
  {
    itemClass: '',
  }
)

ซึ่งถูกกำหนดเป็น

<div :class="itemClass">...</div>

ฉันพยายามหลีกเลี่ยงการใช้ any เป็นประเภท ฉันลองใช้ unknown แต่ก็ได้รับข้อผิดพลาดเมื่อพยายามกำหนดค่าเริ่มต้นให้กับมัน ทางแก้ชั่วคราวดูเหมือนจะเป็นการลบค่าเริ่มต้นออกไป แต่ก็อาจมีกรณีที่ฉันต้องการกำหนดค่าเริ่มต้น

มีประเภทเฉพาะสำหรับแอตทริบิวต์ class ของ Vue หรือไม่?

คำตอบ #1

ค่าการผูก class สามารถเป็นหนึ่งในประเภทต่อไปนี้:

• string

  ตัวอย่าง:

  <div :class="myStringProp">
  

• Record<string, boolean> (ไวยากรณ์วัตถุ)

  ตัวอย่าง:

  <div :class="{ active: true, error: true }">
  

หรืออาเรย์ผสมของข้อข้างต้น:

• (string | Record<string, boolean>)[] (ไวยากรณ์อาร์เรย์)

  ตัวอย่าง:

  <div :class="['item', { active: true, error: true }]">
  

ดังนั้นประเภท itemClass ควรเป็นการรวมของประเภทเหล่านี้:

defineProps<{
  itemClass?: string | Record<string, boolean> | (string | Record<string, boolean>)[]
}>()

เดโม

คำตอบ #2

ด้วย Vue 3.2.39 ฉันใช้สิ่งนี้:

  import { HTMLAttributes } from "vue";

  const props = defineProps<{
    class?: HTMLAttributes["class"];
  }>();

ยังไงก็ยังคงเป็น any หวังว่า Vue จะมีประเภทที่เหมาะสมในเร็วๆ นี้