传递响应式Prop时为何出现“No overload matches this call”错误？

代码场景 #

主应用中的变量定义 #

import { DateTime } from "luxon"
const now = ref(DateTime.now())
const maxCityNameSize = ref(0)

组件传参 #

<time-bar :now="now" :maxCityNameSize="maxCityNameSize"></time-bar>

子组件Props定义 #

const props = defineProps({
    now: { type: DateTime },
    maxCityNameSize: { type: Number },
})

触发的TypeScript错误 #

No overload matches this call.
  Overload 1 of 3, '(props: string[]): { readonly [x: string]: any; }', gave the following error.
  Overload 2 of 3, '(props: ComponentObjectPropsOptions<Data>): { readonly [x: string]: Prop<unknown, unknown> | null | undefined; }', gave the following error.ts(2769)

runtime-core.d.ts(322, 53): The expected type comes from property 'now' which is declared here on type 'ComponentObjectPropsOptions<Data>'

代码可正常运行，但仅now这个Prop触发了上述TS错误，其他响应式变量作为Prop传递时无异常。已知该错误通常关联参数数量或类型不匹配，但未发现明显类型问题，需明确错误原因及解决办法。

这个错误的核心是：Vue对象式defineProps的type字段，仅支持JavaScript原生构造函数（如Number/String），而DateTime是Luxon提供的自定义类，不符合Vue默认的类型校验类型约束。

虽然代码能正常运行，但TypeScript会基于ComponentObjectPropsOptions的类型定义报错——Vue的TS类型规定，对象式Props的type只能是指定的原生构造函数或符合特定格式的自定义构造函数，直接传入DateTime会违反这个类型检查规则。

两种解决方式 #

1. 使用TypeScript泛型定义Props（推荐）
   这种方式是Vue3官方推荐的TS写法，直接通过类型注解声明Props类型，跳过构造函数校验的限制：

   import type { DateTime } from "luxon"
   
   const props = defineProps<{
     now: DateTime
     maxCityNameSize: number
   }>()
   

2. 保留对象式定义，修正类型声明并添加校验
   如果坚持用对象式定义，需要通过PropType指定TS类型，同时添加validator校验值的类型：

   import { DateTime } from "luxon"
   import type { PropType } from "vue"
   
   const props = defineProps({
     now: {
       type: Object as PropType<DateTime>,
       validator: (value: unknown): boolean => {
         return DateTime.isDateTime(value)
       }
     },
     maxCityNameSize: { type: Number }
   })
   

补充说明 #

• maxCityNameSize无报错的原因：Number是JS原生构造函数，完全符合Vue对象式Props的type字段要求。
• 泛型方式的优势：类型推导更清晰，能避免这类构造函数不匹配的TS错误，更适配TypeScript开发场景。

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