3
The problem here is similar to another question, where only the validator
property was a regular function. In your case, both validator
and default
are regular functions (albeit in different props), which inexplicably breaks the type inference for the props
argument in setup()
. I’m seeking the root problem in an open question.
Interestingly, your code creates this type for the props
argument in setup()
, which seems to be an intersection type of keys of string
:
(parameter) props: Readonly<LooseRequired<Readonly<readonly unknown[] & {
[x: number]: string;
} & {
[Symbol.iterator]?: IterableIterator<string> | undefined;
length?: number | undefined;
toString?: string | undefined;
toLocaleString?: string | undefined;
... 19 more ...;
flat?: unknown[] | undefined;
}> | Readonly<...>>>
Workaround
Instead of regular functions, use arrow functions (when functions are needed) in all props
declarations:
export default defineComponent({
props: {
when: {
type: String,
default: '',
//validator(value: string) {
// return ['today', 'tomorrow', 'later'].includes(value)
//},
validator: (value: string) => ['today', 'tomorrow', 'later'].includes(value), //
required: true
},
data: {
type: Object,
//default() {
// return {}
//},
default: () => ({}), //
required: true
},
},
})
…which creates this type for the props
argument:
(parameter) props: Readonly<LooseRequired<Readonly<{
msg?: unknown;
when?: unknown;
data?: unknown;
} & {
when: string;
data: Record<string, any>;
} & {
msg?: string | undefined;
}>>>
1
The validator should be an arrow function :
when: {
type: String,
default: '',
validator:(value:string)=>(['today', 'tomorrow', 'later'].includes(value)),
required:true
},
Source:stackexchange.com