non defined props in functional components are empty

[enpitsuLin]

Version

3.2.25

Reproduction link

codesandbox.io

• SFC

Steps to reproduce

See reproduction link

What is expected?

Both components Test1 and Test2 behave consistently

What is actually happening?

The Test1 component is written in such a way that the props defined by the generic parameters are missing(BTW my IDE code hints work fine), in fact the option of the component has no props option, and the additional definition of props like the following will make it work correctly.

import { defineComponent, ref } from "vue";

const HelloWorld = defineComponent<{ msg: string }>(({ msg }) => {
  // some code
});

HelloWorld.props = { msg: { type: String } };

export default HelloWorld;

Does this mean that defineComponent requires adding additional options such as props? Or is this a working feature?

---

I just want to make it easier to use JSX instead of SFC, and more functional, maybe there are some compile-time plugins here that can make this write work for me?

[posva]

The bug is that props should contain the attrs when no props option is defined. As a workaround, define the props option

[LinusBorg]

@posva that only applies to functional components, doesn't it?

Vue requires runtime props options from which prop types are inferred. It's currently not possible to define a (stateful) component without runtime props and then provide prop types via the generic argument.

I started a discussion some Time ago, @pikax also wrote a small proposal about how to support this in the RFCs repo I think, but so gar it went nowhere.

[sqal]

Is it really a bug @posva? I've never used defineComponent, but it looks to me like it's just a helper function for defining a stateful components (with type inference) and those requires props to be declared upfront. Not sure why author mentioned functional component here.

I think with TypeScript it's better to use script-setup and defineProps which will generate runtime props definition for you.

https://vuejs.org/guide/typescript/composition-api.html#typing-component-props

[enpitsuLin]

@sqal script-setup are excellent, but I can't use both render function and script-setup

[enpitsuLin]

thanks lot, I will follow #3102 and this rfc , maybe these can solve my problem

[posva]

It's not a bug, I somehow read a functional component but it's was a regular one... This is indeed expected for stateful components