Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1zumii opened this issue Jul 27, 2023 · 1 comment

Comments

@1zumii
Copy link

1zumii commented Jul 27, 2023

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?

@1zumii
Copy link
Author

1zumii commented Jul 27, 2023

part of this issue is the same as #8604

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant