render function with component failed typescript check when function props and emits both exists in component
Version
3.2.26
Reproduction link
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<{}> & Omitboolean; } & {}> & 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
if you need a Vue CLI setup to reproduce the problem, please provide a link to an actual repository.
reproduce repo link updated https://github.com/slepher/vue_next_h_tslint_fail
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:
And when you pass the prop, you realize it could still be undefined: