Vue中defineProps使用复杂prop类型的解决方案及支持情况

目前有三个成熟方案可以实现你要的复杂Props校验效果：

• 使用Vue原生的PropType配合自定义validator做运行时校验
  这是兼容性最好的方案，不需要额外依赖，从Vue3正式发布开始就支持。你可以在对象式的defineProps声明里，用PropType把Object、Array这类通用类型标记为你定义的接口类型，再给每个prop写对应的validator校验函数，传入不符合结构的值时Vue会直接在控制台抛出警告。示例代码如下：

  import type { PropType } from 'vue'
  import type { IPerson, IAddress } from '@/types/common' // 你自己的类型文件
  
  const props = defineProps({
    person: {
      type: Object as PropType<IPerson>,
      required: true,
      validator: (value: unknown): value is IPerson => {
        if (typeof value !== 'object' || value === null) return false
        const person = value as Record<string, unknown>
        return typeof person.firstname === 'string' && typeof person.lastname === 'string'
      }
    },
    addresses: {
      type: Array as PropType<IAddress[]>,
      required: true,
      validator: (value: unknown): value is IAddress[] => {
        if (!Array.isArray(value)) return false
        return value.every(addr => {
          if (typeof addr !== 'object' || addr === null) return false
          const addrItem = addr as Record<string, unknown>
          return (
            typeof addrItem.street === 'string' &&
            typeof addrItem.houseNo === 'string' &&
            typeof addrItem.city === 'string' &&
            typeof addrItem.postalCode === 'string' &&
            typeof addrItem.country === 'number'
          )
        })
      }
    }
  })
  

  这个写法同时保留TS类型推导，IDE会自动提示props的字段结构，和你用泛型声明defineProps的体验基本一致，唯一的缺点是嵌套层级深的类型手写validator比较繁琐。
• 配合Schema校验库减少重复代码
  如果项目里复杂类型很多，可以用zod、valibot这类带TS类型推导的schema校验库，只需要写一次校验规则，就能同时生成TS类型和运行时校验逻辑，不用重复写interface和validator。以zod为例：

  import { z } from 'zod'
  
  // 定义校验规则，直接从规则推导TS类型，不需要单独写interface
  const PersonSchema = z.object({
    firstname: z.string(),
    lastname: z.string()
  })
  const AddressSchema = z.object({
    street: z.string(),
    houseNo: z.string(),
    city: z.string(),
    postalCode: z.string(),
    country: z.number()
  })
  const PropsSchema = z.object({
    person: PersonSchema,
    addresses: z.array(AddressSchema)
  })
  type ITestComponentProps = z.infer<typeof PropsSchema>
  
  const props = defineProps(
    Object.fromEntries(
      Object.entries(PropsSchema.shape).map(([key, rule]) => [
        key,
        {
          required: true,
          validator: (val: unknown) => {
            const result = rule.safeParse(val)
            if (!result.success) console.warn(`[Props校验失败] ${key}: ${result.error.message}`)
            return result.success
          }
        }
      ])
    )
  )
  

  这个方案的优势是类型和校验逻辑自动对齐，不会出现改了类型忘改校验的问题，校验失败的报错信息也更明确。
• 借助编译插件自动生成校验逻辑
  目前已经有不少构建插件可以在编译阶段把你写的泛型式defineProps<ITestComponentProps>()自动转换成带运行时校验的代码，不需要手写任何validator，只要配置好插件就能直接用，注意选择和你当前Vue版本、构建工具匹配的插件即可。

另外先纠正你示例里的写法问题：你写的<TestComponent :props="'foo'" />是错误的，defineProps里声明的person、addresses字段是直接作为组件的属性传入的，正确写法是<TestComponent :person="xxx" :addresses="xxx" />，你写的:props="'foo'"相当于传了一个未声明的props属性，就算后续官方支持了完整的复杂类型校验，这个写法也只会提示缺少必填的person和addresses，不会识别到你传的foo参数。

你看到的文档是Vue3.3之前的旧说明：

• Vue 3.3及以上版本已经支持从外部文件导入类型、使用interface/enum等复杂类型作为defineProps的泛型参数，但默认只提供TS类型层面的校验：也就是说开了vue-tsc检查、IDE安装了Volar插件的情况下，你传错props会直接在模板里标红报错，但是默认不会注入运行时校验逻辑，如果跳过TS检查传入错误值，控制台不会有警告。
• 官方目前已经把「泛型Props自动生成运行时校验」列入了正式的特性规划，属于Vue3后续小版本的迭代内容，核心逻辑目前在实验性分支测试，暂时没有公布明确的正式上线时间，你可以关注Vue的正式发布日志获取更新通知。

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