Vue3传递函数/函数数组Props时类型校验失败如何修复？

问题原因 #

你当前的Props类型定义写法有误，虽使用了PropType断言，但将Array单独断言为函数数组类型的方式，未让Vue的运行时类型校验正确识别数组的合法类型，导致传递数组时触发警告。

解决方案 #

方案1：正确联合类型断言 #

将type数组整体断言为函数或函数数组的联合类型，让TypeScript类型推断和Vue运行时校验同时生效：

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    onClick: {
      // 整体断言为函数或函数数组的联合类型
      type: [Function, Array] as PropType<((...args: any[]) => any) | ((...args: any[]) => any)[]>,
      default: null
    }
  }
})

若为Vue2项目，使用Vue.extend的写法：

import Vue from 'vue'
import { PropType } from 'vue'

export default Vue.extend({
  props: {
    onClick: {
      type: [Function, Array] as PropType<((...args: any[]) => any) | ((...args: any[]) => any)[]>,
      default: null
    }
  }
})

方案2：添加自定义校验函数（更严谨） #

若需确保数组中的每一项都是函数，可添加validator函数做额外校验，同时保留类型断言：

props: {
  onClick: {
    type: [Function, Array] as PropType<((...args: any[]) => any) | ((...args: any[]) => any)[]>,
    default: null,
    validator: (value: unknown) => {
      if (Array.isArray(value)) {
        // 验证数组中每个元素都是函数
        return value.every(item => typeof item === 'function')
      }
      // 验证单个值是函数或null
      return typeof value === 'function' || value === null
    }
  }
}

说明 #

• 方案1解决了类型断言不匹配的问题，让Vue能正确识别函数数组为合法类型；
• 方案2进一步增强了校验逻辑，避免传入包含非函数元素的数组。

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