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

Question

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

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

绑定为

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

我试图避免any用作类型。我尝试unknown了，但是当我尝试给它一个默认值时得到一个错误。临时解决方案似乎是简单地删除默认值，但可能存在我想要设置默认值的情况。

classVue属性是否有特定类型？

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

演示