vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
46.71k stars 8.19k forks source link

Using generic component with typed slots (defineSlots) in non-setup component breaks types #10647

Open vaiil opened 5 months ago

vaiil commented 5 months ago

Vue version

3.4.21

Link to minimal reproduction

https://stackblitz.com/edit/vite-xncnuv?file=src%2FApp.vue

Steps to reproduce

Open stackblitz Run npx vue-tsc --noEmit in terminal

What is expected?

No type errors

What is actually happening?

Got error:

src/App.vue:6:5 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type '<T>(__VLS_props: { msg: T; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: { attrs: any; emit: any; slots: Readonly<...> & { ...; }; } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { ...; }' is not assignable to type 'Component<any, any, any, ComputedOptions, MethodOptions, {}, any>'.
      Type '<T>(__VLS_props: { msg: T; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: { attrs: any; emit: any; slots: Readonly<...> & { ...; }; } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { ...; }' is not assignable to type 'FunctionalComponent<any, {}, any, {}>'.
        Types of parameters '__VLS_ctx' and 'ctx' are incompatible.
          Type 'Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<string, any> | undefined) => void; }, "expose">' is not assignable to type '{ attrs: any; emit: any; slots: Readonly<{ default(props: { msg: unknown; }): any; }> & { default(props: { msg: unknown; }): any; }; }'.
            Types of property 'slots' are incompatible.
              Type 'Readonly<InternalSlots>' is not assignable to type 'Readonly<{ default(props: { msg: unknown; }): any; }> & { default(props: { msg: unknown; }): any; }'.
                Property 'default' is missing in type 'Readonly<InternalSlots>' but required in type 'Readonly<{ default(props: { msg: unknown; }): any; }>'.

6 

  src/components/HelloWorld.vue:7:3
    7 

    'default' is declared here.
  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:761:25
    761 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.

Found 1 error in src/App.vue:6

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.4.21 => 3.4.21

Any additional comments?

No response

lzl0304 commented 1 month ago

Temporary solution:

// HelloWorld.vue
<script setup lang="ts" generic="T">
import { ref } from 'vue';

defineProps<{ msg: T }>();

defineSlots<{
-  default(props: { msg: T }): any;
+  default?(props: { msg: T }): any;
}>();

const count = ref(0);
</script>