Subscribe on changes!

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

avatar
Jul 27th 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?

avatar
Jul 27th 2023

part of this issue is the same as #8604