Generic composition api component used from options api does not type check
Vue version
3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-sif4dc?file=src%2FApp.vue
Steps to reproduce
npm run typecheck
fails with errors
What is expected?
Well I was expecting it to type check successfully. Documentation isn't clear but it might just be that this is intentionally not supported or that it requires some extra code to monomorphise the component type. I couldn't find anyone discussing this case.
What is actually happening?
type checking fails with the following errors.
src/App.vue:18:5 - error TS2769: No overload matches this call.
The last overload gave the following error.
Type '<T extends { desc: string; }>(__VLS_props: { modelValue: T[]; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: Pick<{ props: { ...; }; expose(exposed: {}): void; attrs: any; slots: {}; emit: { ...; }; }, "attrs" | ... 1 more ... | "slots"> | undefined, __VLS_setup?: { props: { ...; }; expos...' is not assignable to type 'Component<any, any, any, ComputedOptions, MethodOptions>'.
Type '<T extends { desc: string; }>(__VLS_props: { modelValue: T[]; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: Pick<{ props: { ...; }; expose(exposed: {}): void; attrs: any; slots: {}; emit: { ...; }; }, "attrs" | ... 1 more ... | "slots"> | undefined, __VLS_setup?: { props: { ...; }; expos...' is not assignable to type 'FunctionalComponent<any, any, any>'.
Types of parameters '__VLS_ctx' and 'ctx' are incompatible.
Type 'Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void); expose: (exposed?: Record<string, any> | undefined) => void; }, "expose">' is not assignable to type 'Pick<{ props: { modelValue: { desc: string; }[]; }; expose(exposed: {}): void; attrs: any; slots: {}; emit: { itemClicked: [item: { desc: string; }]; }; }, "attrs" | "emit" | "slots">'.
Types of property 'emit' are incompatible.
Type '((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void)' is not assignable to type '{ itemClicked: [item: { desc: string; }]; }'.
Type '(event: unknown, ...args: any[]) => void' is not assignable to type '{ itemClicked: [item: { desc: string; }]; }'.
18 ListGeneric,
~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1245:25
1245 export declare function defineComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = {}, EE extends string = string, S extends SlotsType = {}, I extends ComponentInjectOptions = {}, II extends string = string>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II, S>): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, PublicProps, ResolveProps<PropsOptions, E>, ExtractDefaultPropTypes<PropsOptions>, S>;
~~~~~~~~~~~~~~~
The last overload is declared here.
src/App.vue:32:12 - error TS2339: Property 'clicked' does not exist on type '{ logItem(arg: T): void; }'.
32 this.clicked = arg;
~~~~~~~
System Info
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
Memory: 60.64 GB / 88.39 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.2/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
pnpm: 7.5.2 - ~/.nvm/versions/node/v16.13.2/bin/pnpm
Browsers:
Chrome: 113.0.5672.92
npmPackages:
vue: ^3.3.4 => 3.3.4
### Any additional comments?
Converting a large project to vue 3, the template is now typechecked and required generic props