Реагировать TypeScript |Правильный тип для опоры обработчика событий

Question

Компонент My App передает обработчик событий в качестве реквизита для Button Component

// App.js

  public handlePlay = () => {
    this.setState({ ****** })
  }

// render

<Button play={this.handlePlay} />

Что такое правильный тип для обработчика событий, переданного через prop, т.е.play?

// Button.js
interface ButtontProps {
  play: any //what is the correct type here?
}

export const Button: React.SFC<ButtontProps> = ({ play }) => (
  <button onClick={play}>Play</button>
)

Я не хочу использовать any, поскольку это отвлечет меня от применения правильных типов для такого экземпляра.

Answer 1

Самое простое решение - использовать тип MouseEventHandler с HTMLButtonElement в качестве параметра типа:

interface ButtonProps {
  play: React.MouseEventHandler<HTMLButtonElement>
}

Answer 2

Скорее всего, это должно быть одно из следующих значений:

(event: React.MouseEvent<HTMLElement>) => void
(event: React.MouseEvent<HTMLInputElement>) => void

Вы можете подтвердить это, посмотрев на React здесь .