Как решить ошибку с биндом события на компоненте?

Question

[dicem]

Есть кастомный компонент кнопки

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>
    )
  }
}

И когда я пытаюсь забиндить событие на этот компонент

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

TypeScript начинает жаловаться следующим образом:

(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)

Что я делаю не так?

Answer 1

[no_one_safe]

@click

Comments

[dicem]

мужик, это TSX T_T

[no_one_safe]

dicem, значит я чего то не шарю, сорян.

Answer 2

[skyholder]

onClick={() => this.$emit('onClick')}

я в TSX тоже не шарю, но тут точно нужна стрелочная функция? в обычных .vue файлах emit срабатывает и без оборачивания в функцию