Skip to content

defineComponent with direct setup in TSX, can't infer any props about component like ref, class #8855

Closed
@1zumii

Description

@1zumii

Vue version

3.3.4

Link to minimal reproduction

https://gitee.com/xxx8848/vue-definecomponent-demo

Steps to reproduce

  1. clone repo
  2. open project in vscode with Volar v1.8.8 and Volar TS v1.8.8
  3. go to app.vue and todo-list/index.tsx
  4. search lines marked with ERROR:, or hover the error underscores by TS

What is expected?

defineComponent with Function Signature can work properly

  1. use all component prop: ref, class, style ...
  2. use SetupContext when using generic setup: emit, expose ...

What is actually happening?

<TodoList1> use defineComponent Function Signature. But can't use ref in this component.

<!-- ERROR: ref does not exist in TodoProps type -->
<TodoList1 v-model="data1" ref="ref1"/>

and using generic in defineComponent, SetupContext can't infer in setup's second parameter

export const TodoList3 = defineComponent(
    <Data extends string|number>(
        props: {modelValue:Data[]},
        { emit } // ERROR: Binding element 'emit' implicitly has an 'any' type.ts(7031)
    ) => {

System Info

System:
    OS: macOS 13.4.1
    CPU: (12) x64 AMD Ryzen 5 5600U with Radeon Graphics         
    Memory: 855.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 16.20.1 - /usr/local/opt/node@16/bin/node
    npm: 8.19.4 - /usr/local/opt/node@16/bin/npm
    pnpm: 8.6.7 - /usr/local/bin/pnpm
Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5.1

Any additional comments?

digging into vue's type definition, i find the defineComponent for use setup directly and generic

apiDefineComponent.ts #Line98
overload 1: direct setup function

and its return type is

(props: Props & EmitsToProps<E>) => any

only infer Props and parsed Emits defined by user, doesn't append compnent's props to it, like

export type PublicProps = VNodeProps &
  AllowedComponentProps &
  ComponentCustomProps

it's designed that user can't use these prop in this function signature?

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