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

typing defineComponent props #3796

Open
Zclhlmgqzc opened this issue May 19, 2021 · 5 comments · Fixed by #5416
Open

typing defineComponent props #3796

Zclhlmgqzc opened this issue May 19, 2021 · 5 comments · Fixed by #5416

Comments

@Zclhlmgqzc
Copy link
Contributor

Zclhlmgqzc commented May 19, 2021

Version

3.0.11

Reproduction link

youzan/vant#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

` B~M492 30T2AC$TJ4 }24

What is actually happening?

my-nav-bar title type lost
<my-nav-bar title={} />
@posva
Copy link
Member

posva commented May 19, 2021

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

@posva posva closed this as completed May 19, 2021
@Zclhlmgqzc
Copy link
Contributor Author

@posva I added some background information

@chenjiahan
Copy link
Contributor

chenjiahan commented Jun 1, 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

iwusong pushed a commit to iwusong/core that referenced this issue May 13, 2022
yyx990803 added a commit that referenced this issue May 20, 2022
This is necessary for compatibility w/ tsc-generated component types
using DefineComponent.

revert #5416
reopen #3796
fix #5967
@yyx990803 yyx990803 reopened this May 20, 2022
@yyx990803
Copy link
Member

yyx990803 commented May 20, 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.

@productdevbook
Copy link
Contributor

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants