Type 'Function' is not assignable to type ...

Question

react+typescriptを勉強中です。
下記コードのコンパイルができません...。

Buttonクラスのメンバーである this.handleClick への適切な型を記述できていない、というのがエラーの原因だと思うのですが、何にすればいいのかわかりません。

import React from 'react';

interface Props {
  handleClick: any
}
interface State {}

class Button extends React.Component<Props, State> {
  handleClick: Function;

  constructor(props: Props) {
    super(props);
    this.handleClick = props.handleClick.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.handleClick}
      >
        Button
      </button>
    )
  }
}

Failed to compile.

TypeScript error in Button.tsx(20,9):
Type 'Function' is not assignable to type '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'.
  Type 'Function' provides no match for the signature '(event: MouseEvent<HTMLButtonElement, MouseEvent>): void'.  TS2322

    18 |     return (
    19 |       <button
  > 20 |         onClick={this.handleClick}
       |         ^
    21 |       >
    22 |         Exchange
    23 |       </button>

ご回答おねがいしますm(__)m
参考になりそうな記事などありましたがご紹介もおねがいします。

Answer 1

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void

エラー文の指示通り、これが期待する型なので、

class Button extends React.Component<Props, State> {
  handleClick: (MouseEvent<HTMLButtonElement, MouseEvent>) => void;

ではないでしょうか