在 Vue 3 脚本设置 prop 定义中使用什么 TypeScript 类型来传递类？

Question

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

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

其绑定为

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

我试图避免使用anyas 类型。我尝试过unknown，但当我尝试为其指定默认值时出现错误。临时解决方案似乎是简单地删除默认值，但在某些情况下我可能需要设置默认值。

Vue 属性有特定类型吗class？

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

演示