Skip to content

props type of generic defineComponent is inferred to be any #13763

@jss-tg

Description

@jss-tg

Vue version

3.5.18

Link to minimal reproduction

https://play.vuejs.org/#eNrtVm1r2zAQ/iuHB0sHwd7WDUaWBrqshRbWlTVsg7oM1b4kamXJSHKakvm/73TOi9um7fZ9Advy6V6ee+7OyiLaL8t4VmHUi/ous7L0oISe7KWRd/M0GqQ61bIojfWwgBzHUuPQ0LtG7btgcQw1jK0pII3ISxp9THWShAuGprxttqbel66XJKRw5WJjJ4koZTJBjVaoeOoL9aLxnK08r52MpghSj9FazMHflghmTJ6LEqTrrbUyo51ncQ8+s6cz9FV5qNdQ+wtWDL/CTXog9C0jZYmSzrdEdRcWq+sfrOAlm5xWl0pmp9aUjsjbIIO9+/TtpBqgPwKce9S5A+et1BP4DboqLtEOdsrgpEe8c/DRx2XI0fkF1K9gbxDgBSQUvXLIUYyTXhoN+6dHMEWLZHIdGIRVcV0ghoAFuwZcZirtCR3Vcuf1q1DvsGdJz2rYacfhSJawooVxpTOOZCwcn/1cKSzN+rmcDRbsOZ4JVWHdT4KoUavDo+6GOzkshK6EAku6skDgpImqTAkrOIJ0kFXUANqrWyJJKgUaMcc8Dh6W2JZcnXeIq04XOoGqzgUHSjVn9VxHHco5Sba3Fe/1KOzNXxXsbteM7vcMFbDdM3T7fmJy5J6hl32lzA3m6z5ZydeCYeW8KVjM5RlaFH7TV00HHhF2oTP8If30i5xL7e7PwHO4WmOwvNYhvpahMo79Piq+Nw2NYCyUw4eeGyqbNY1UyyfZzmSOS9ddaBYjKpwLt/42nIt68GB2n882jmN4B4WhqaEle2kPcNMf/6d4yxRvMhgKwuJNqGF4yIkOdHqaudWoMR1PzSwIF8zbo4tzPoCIeVEpft6pQCu9Owlzaag4G8z0wt9iCkgn3BRp0tKIC7K3OH/Thbdd2L2oIbmr3lR+q01HBOCX4ZZ1WpYboiiBmq5+0pSOZFGXzlaq2lhO4itnNB29jD2NwvknFdpls6cRf0uCvzQS4atwzDJvK2Te2WaK2fUW+VU4vnu0OLXo0M7obF7veWEn6Jvtg7MTat3WZmHySpH2E5vf0BlVBYyN2qdK5wS7pcdoj/h/A03DyB2E6XCrpALQTffwP4fA82Opb+Duxu+WfVETi79maINPInA3fh+/+RDVfwA3ft+Y

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
  }
)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions