Vue props接收数组对象时如何正确编写类型定义

可选写法1是正确的，可选写法2完全错误。

核心原因 #

Vue的props类型校验，针对的是传入值本身的顶层数据类型，不会自动递归校验数组、对象这类容器内部嵌套的元素类型：

• 你传入的propsValue是用[]声明的数组实例，哪怕数组内存储的每个元素都是对象，它本身的顶层类型始终是Array，因此type字段必须配置为Array。
• 如果把type配置为Object，Vue会判定传入值需要是{}形式的普通键值对对象，传入数组时会直接触发类型校验失败的警告。另外写法2的默认值写法本身也有问题：箭头函数() => {}会把大括号识别为函数代码块，最终返回undefined，如果要给Object类型的prop设空对象默认值，需要写成() => ({})。

拓展：如果需要校验数组内的元素格式 #

如果不仅要校验顶层是数组，还要约束数组内的每一项都是指定结构的对象，不能靠修改顶层type实现，需要自定义校验规则，参考写法：

const props = defineProps({
  propsValue: {
    type: Array,
    default: () => [],
    // 自定义校验：要求数组每一项都是非null的对象
    validator: (val) => val.every(item => typeof item === 'object' && item !== null)
  }
})

如果项目使用TypeScript，也可以直接通过泛型定义完整的类型结构：

const props = defineProps<{
  propsValue: Array<{
    foo?: string
    bar?: string
    baz?: string
  }>
}>()

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