什么 TypeScript 类型用于在 Vue 3 脚本设置道具定义中传递 class？

What TypeScript type is used to pass a class in Vue 3 script setup prop definitions?

我有一个使用 script setup 方法的 Vue 3 单文件组件。我要定义的道具之一是接受 class 属性的等价物。这意味着 prop 值可以是字符串、表达式、数组或对象。当我尝试使用 withDefaults() 为该道具分配一个默认的空字符串值时，问题就来了。

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

绑定为

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

我试图避免使用 any 作为类型。我试过 unknown 但是当我尝试给它一个默认值时出现错误。临时的解决办法好像是简单的去掉默认值，但是可能有些情况我想要设置默认值。

Vue class 属性有特定类型吗？

class绑定值可以是以下类型之一：

  • string

    示例：

    <div :class="myStringProp">

  • Record<string, boolean> (Object syntax)

    示例：

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

或以上的混合数组：

  • (string | Record<string, boolean>)[] (Array syntax)

    示例：

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

所以itemClass类型应该是这些类型中的union：

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

demo