defineComponent with direct setup in TSX, can't infer any props about component like ref, class
Vue version
3.3.4
Link to minimal reproduction
https://gitee.com/xxx8848/vue-definecomponent-demo
Steps to reproduce
- clone repo
- open project in vscode with Volar v1.8.8 and Volar TS v1.8.8
- go to
app.vue
andtodo-list/index.tsx
- search lines marked with
ERROR:
, or hover the error underscores by TS
What is expected?
defineComponent
with Function Signature can work properly
- use all component prop: ref, class, style ...
- 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?