Subscribe on changes!

Generic composition api component used from options api does not type check

avatar
Jul 8th 2023

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
avatar
Jul 13th 2023

I see, so internally it's expecting to be able to use InstanceType ? Thanks

avatar
Oct 2nd 2023

@dten This issue should be fixed in latest version of volar.

avatar
Oct 2nd 2023

Great I'll try it out

avatar
Oct 2nd 2023

It works perfectly, thank you