Subscribe on changes!

render function with component failed typescript check when function props and emits both exists in component

avatar
Dec 23rd 2021

Version

3.2.26

Reproduction link

sfc.vuejs.org/

https://github.com/slepher/vue_next_h_tslint_fail

Steps to reproduce

put Test.vue and Comp.vue in vue cli generated typescript project and run npm serve

What is expected?

tslint passes

What is actually happening?

ERROR in ./Test.vue:16:9
TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'DefineComponent<{ submit: { type: PropType<() => boolean>; required: true; }; }, unknown, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to parameter of type 'DefineComponent<{ submit: { type: PropType<() => boolean>; required: true; }; }, {}, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 5 more ..., {}>'.
      Type 'DefineComponent<{ submit: { type: PropType<() => boolean>; required: true; }; }, unknown, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit boolean; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: Wa...'.
        Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit boolean; } & {}> & { onReset?: (() => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, option...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit boolean; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): Watch...'.
          Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit boolean; } & {}> & { onReset?: (() => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, option...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit boolean; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): Watch...'.
            Types of property '$emit' are incompatible.
              Type '(event: "reset") => void' is not assignable to type '(event: string, ...args: any[]) => void'.
                Types of parameters 'event' and 'event' are incompatible.
                  Type 'string' is not assignable to type '"reset"'.

Environment Info:
  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.1.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    @element-plus/icons-vue:  0.2.4
    @fawmi/vue-google-maps: ^0.9.4 => 0.9.4
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.0
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.13
    @vue/cli-plugin-unit-mocha: ~4.5.0 => 4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/compiler-core:  3.2.26 (3.1.5)
    @vue/compiler-dom:  3.2.26 (3.1.5)
    @vue/compiler-sfc: 3.1 => 3.1.5 (3.2.26)
    @vue/compiler-ssr:  3.2.26 (3.1.5)
    @vue/component-compiler-utils:  3.2.2
    @vue/devtools-api:  6.0.0-beta.19
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.2.26
    @vue/reactivity-transform:  3.2.26
    @vue/runtime-core:  3.2.26
    @vue/runtime-dom:  3.2.26
    @vue/server-renderer:  3.2.26
    @vue/shared:  3.2.26 (3.1.5)
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.15
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.19.1
    typescript: 4.4 => 4.4.4
    vue: 3 => 3.2.26
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1
    vue-cli-plugin-element-plus: ~0.0.13 => 0.0.13
    vue-demi:  0.12.1
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.1)
    vue-router: 4 => 4.0.12
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vue-upload-component: ^3.0.50 => 3.0.50
    vuedraggable: ^4.1.0 => 4.1.0
  npmGlobalPackages:
    @vue/cli: 4.5.13
avatar
Dec 23rd 2021

if you need a Vue CLI setup to reproduce the problem, please provide a link to an actual repository.

avatar
Dec 24th 2021
avatar
Dec 24th 2021

The problem is quite simple, the type errror message in a render function is unfortunately not very helpful as it's too large.

Your code should look like this:

  setup(props, { slots }) {
    return () => {
      return h(TestComponent, { submit: props.submit! }, () =>
        slots.default ? slots.default() : undefined
      )
    }
  }

you are not passing the prop submit, which is required by TestComponent.

The problem is a bit better visible in a template:

Bildschirmfoto 2021-12-24 um 12 06 04

And when you pass the prop, you realize it could still be undefined: Bildschirmfoto 2021-12-24 um 11 59 07