[SOLVED] Why is there a "No overload matches this call" error when passing a reactive prop?

Why is there a "No overload matches this call" error when passing a reactive prop?

In my main application I defined

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

The variables are then passed to a component:

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

In that component, they are defined as

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

My code works as expected, but I get for the props above a TypeScript error I cannot understand:

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>'

I have never seen that error (despite having used props a lot) - what does it mean?

For the sake of completeness, I added another reactive variable passed as a prop which does not trigger the error.

When searching for the reason, it was generally pointed that the error some from either the wrong number of parameters to a function (not applicable), or by a type mismatch (I do not see a type mismatch either).

Solution

You should define the type in prop setup like this:

const props = defineProps<{
    now: DateTime;
    maxCityNameSize: number;
}>();

You can find more information here: TypeScript with Composition API - Complex prop types | Vue.js