什么 TypeScript 類型用於在 Vue 3 腳本設置道具定義中傳遞 class？

Question

我有一個使用腳本設置方法的 Vue 3 單文件組件。 我要定義的道具之一將接受class屬性的等效項。 這意味着 prop 值可以是字符串、表達式、數組或 object。 當我嘗試使用withDefaults()為這個道具分配一個默認的空字符串值時，問題就來了。

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

綁定為

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

我試圖避免使用any作為類型。 我嘗試了unknown ，但是當我嘗試給它一個默認值時得到一個錯誤。 臨時解決方案似乎是簡單地刪除默認值，但可能存在我想要設置默認值的情況。

Vue class屬性是否有特定類型？

Answer 1

class綁定值可以是以下類型之一：

• string

  例子：

   <div:class="myStringProp">

• Record<string, boolean> （ Object 語法）

  例子：

   <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>)[]
}>()

演示

Answer 2

對於 Vue 3.2.39，我使用這個：

  import { HTMLAttributes } from "vue";

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

無論如何它仍然是any 。 希望 Vue 很快就會有合適的類型。