Skip to content

Props do not respect optionality in components defined using defineComponent with a generic function signature #12762

Closed as duplicate of#12637
@cernymatej

Description

@cernymatej

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqdU8Fu2zAM/RVCF6eA4WDIdsmcDFsRDNuhK1bfqmIwbCZRp1CCJHspAv/7KNtps3Yd1l5si6T53iOfDuKjtVnboJiL3FdO2QAeQ2NBl7RZSBG8FEtJameNC3CAGteK8NzwmZBCCtsUrrQJvrizyJ/x33NDAfcBOlg7s4OE2yfvJXEXjrt1WSFcOmN9XizhIAmgLfWHORSSulhVGfIBvtmgDJX6MxI6Va325c5qhMVjBpPYIC+AAZFqDz44RZvlxEaE+T3QGSxGMADHJB3BpI9tJ0mt2iSF6yEJkByhR8xkSNycxXeXxufYaMS4TlhActOnJXHZYw0Xhv5Lxp+kS7p7Fe0naEnP+YUK8ulgB14+HwJyozIgn3jaz+xm2tee5J/qjiX59KSbSNliPK212mS33hD7sKcmRcWjURrd0IxtOD+SlqLU2vz62seCa3DUx/9ssfr5l/it38eYFJcOPboWpbjPhdJtMAzp1dUF++gkuTN1o7n6H8nv6I1uIseh7FNDNdM+qevZfulvEFuz8KtoVX8UFYk+7EUKvi3RFc9Jf6A7y96OC+t4ij9adLEnD3CWvcvezET3GxBXR7w=

Steps to reproduce

Open the reproduction and have a look at the type error on the <OptionalGenericExample /> component in the template.

I defined an optional prop:

interface Props<T> {
  val?: T
}

and used it in a generic component:

const OptionalGenericExample = defineComponent(
  <T extends string>(props: Props<T>) => {
    return () => h('div', [
      'OptionalExample'
    ])
  },
  {
    props: ['val']
  }
)

When used in the template without providing the prop, the following error is shown:

Argument of type '{}' is not assignable to parameter of type '{ val: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<string, unknown>'.
  Property 'val' is missing in type '{}' but required in type '{ val: any; }'.
<template>
  <OptionalGenericExample />
</template>

This doesn't happen when the component is not generic.

What is expected?

I would expect no error to be present, since the prop is optional and doesn't need to be specified.

What is actually happening?

A type error is present.

System Info

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions