props type of generic defineComponent is inferred to be any #13763
Description
Vue version
3.5.18
Link to minimal reproduction
Steps to reproduce
Copy the demo of the generic component from the official website to the editor.
const Comp = defineComponent(
<T extends string | number>(props: { msg: T; list: T[] }) => {
// use Composition API here like in <script setup>
const count = ref(0)
return () => {
// render function or JSX
return <div>{count.value}</div>
}
},
// manual runtime props declaration is currently still needed.
{
props: ['msg', 'list']
}
)
What is expected?
props type of Comp is inferred to be {msg: T; list: T[]}:
const CompFixed: new <T extends string | number>(props: {
msg: T;
list: T[];
} & {} & VNodeProps & AllowedComponentProps & ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<{
msg: T;
list: T[];
} & {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, ComponentProvideOptions, OptionTypesType<{}, {}, {}, {}, {}, {}>, {
msg: T;
list: T[];
} & {}, ... 4 more ..., {}>What is actually happening?
props type of Comp is inferred to be {msg: any; list: any}:
const Comp: DefineSetupFnComponent<{
msg: any;
list: any;
}, {}, {}, {
msg: any;
list: any;
} & {}, PublicProps>System Info
Any additional comments?
Cast the type of the props option to any can temporarily circumvent this problem. 🙂️
const CompFixed = defineComponent(
<T extends string | number>(props: { msg: T; list: T[] }) => {
// use Composition API here like in <script setup>
const count = ref(0)
return () => {
// render function or JSX
return <div>{count.value}</div>
}
},
{
// Cast to any to ignore the type of props
props: ['msg', 'list'] as any
}
)