Subscribe on changes!

typing defineComponent props

avatar
May 19th 2021

Version

3.0.11

Reproduction link

https://github.com/youzan/vant/issues/8701

Steps to reproduce

import { NavBar } from 'vant'
import { defineComponent, h } from 'vue'

export default defineComponent({
  name: 'MyNavBar',
  props: { 
    ...NavBar.props,  
    // more props ...
  },
  setup(props, { attrs, slots }) {
    return ()  => h(
      NavBar,
      {
        ...props,
        ...attrs
      },
      slots
    )
  }
})
(JSX attribute) title?: string | undefined
<van-nav-bar title={} />

but my-nav-bar title type lost
<my-nav-bar title={} />

What is expected?

(JSX attribute) title?: string | undefined
<my-nav-bar title={} />

![DGP9`LHK1JFL3E_{0XN~L4D](https://user-images.githubusercontent.com/31752986/118841914-50fd1f00-b8fb-11eb-860f-421154cd5540.png)

![` B~M492 30T2AC$TJ4 }24](https://user-images.githubusercontent.com/31752986/118841935-55293c80-b8fb-11eb-982f-523976fab294.png)

What is actually happening?

my-nav-bar title type lost
<my-nav-bar title={} />
avatar
May 19th 2021

You might want to open a PR. But you will need to explain yourself (in English) Ines off just post pictures

avatar
May 19th 2021

@posva I added some background information

avatar
Jun 1st 2021

@posva @pikax The type of Component.props is missing after wrapping the defineComponent method, which makes it difficult to create HOC.

import { defineComponent } from 'vue';

const Component1 = {
  props: {
    foo: String,
  },
};

const Component2 = defineComponent(Component1);

Component1.props; // --> { foo: StringConstructor }
Component2.props; // --> any
avatar
May 20th 2022

#5416 introduced a regression because it changed the argument order of DefineComponent, which breaks component definitions generated via tsc/vue-tsc, and a number of other cases.

We need to find a way to do it while preserving the current argument order of DefineComponent.

avatar
May 8th 2023

@yyx990803

There must be a way to send type, attrs only takes data, but if we define interface, at least volar can collect both props and attrs types. This feature opens it to libraries like the read-ui.

Couldn't it be easy to send attrs an interface or type as we can write props in a simple way?