Vue组件中如何为class属性定义类型？

现成导入类型推荐 #

Vue官方已提供适配:class所有绑定格式的专用类型，直接从vue包导入ClassValue即可，它覆盖了字符串、数组、对象等所有合法的class绑定场景：

import type { ClassValue } from 'vue';

const props = defineProps<{
  class?: ClassValue;
}>();

类型覆盖场景 #

ClassValue原生支持以下所有合法的class写法：

• 字符串格式：'base-class'
• 对象格式：{ 'active': isActive, 'hidden': isHidden }
• 数组格式：['static-class', { 'dynamic-class': isDynamic }]
• 嵌套组合格式：['class-a', ['class-b', { 'class-c': isTrue }]]

透传提示 #

如果需要将传入的class透传给组件根元素，直接在根元素上使用:class="$props.class"即可，Vue会自动处理所有格式的class绑定，无需额外转换。

内容的提问来源于stack exchange，提问作者chipit24