How to solve an error with an event bind on a component?

Question

typescript

There is a custom button component

import { Component, Prop } from 'vue-property-decorator';
import { VueComponent } from '@/shims-vue';

import './Button.less'

interface Props {
  tool?: boolean,
  wide?: boolean
}

@Component
export default class Button extends VueComponent<Props> {

  @Prop(Boolean) tool?: string;
  @Prop(Boolean) wide?: boolean;

  get className() {
    const wide = this.wide ? 'button_wide' : ''
    const tool = this.tool ? 'button_tool' : ''
    return ['button', wide, tool].join(' ').trim()
  }

  render() {
    return (
      <button class={this.className} onClick={() => this.$emit('onClick')}>
        { this.$slots.default }
      </button>
    )
  }
}

And when I try to bind an event to this component

<Button
  wide={i === arr.length}
  onClick={this.remoteInputNumber(num)}
>
  {num}
</Button>

TypeScript starts complaining like this:

(JSX attribute) onClick: number

No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): Button', gave the following error.
    Type '{ wide: boolean; onClick: number; }' is not assignable to type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.
      Property 'onClick' does not exist on type 'Props & { key?: string | undefined; class?: string | { [key: string]: string; } | CSSClass[] | undefined; }'.ts(2769)

What am I doing wrong?

Answer 1

@click

Answer 2

onClick={() => this.$emit('onClick')}
I don’t rummage in TSX either, but do you really need an arrow function here? in regular .vue files, emit fires without wrapping in a function