Subscribe on changes!

No overload matches this call. While declaring Props with Proptype<T> (TypeScript)

avatar
Sep 10th 2021

Version

3.2.11

Reproduction link

sfc.vuejs.org/

Steps to reproduce

interface Option {
    value: unknown;
    text: string;
}

const optionsProptype: PropType<string[]> | PropType<number[]> | PropType<Option[]> = Array;
// const selectedProptype = [String, Number, Object]; <-- this works
// const selectedProptype = [String, Number, Object] as const; <-- Doesn't work but not a big deal. Wanted to mention it anyways.
const selectedProptype = [String, Number, Object as PropType<Option>];

export default defineComponent({
    props: {
        options: {
            type: optionsProptype,
            required: true,
        },
        modelValue: { // <---- ERROR: No overload matches this call. The last overload gave the following error. ts(2769)
            type: selectedProptype,
            required: true,
        },
    },
});

What is expected?

No error

What is actually happening?

ERROR: No overload matches this call. The last overload gave the following error. ts(2769)

avatar
Sep 10th 2021
const selectedProptype = [String, Number, Object] as as PropType<string | number | Option>;
avatar
Sep 10th 2021

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

avatar
Sep 10th 2021

Does this mean that

const optionsProptype: PropType<string[] | number[] | Option[]> = Array;

is more correct than

const optionsProptype: PropType<string[]> | PropType<number[]> | PropType<Option[]> = Array;

?

Should definitely be mentioned in the docs imho.

avatar
Sep 10th 2021

No, I would say those two are equivalent in my (non-expert) understanding of TS. The second one is just unnecessarily verbose.