Как правильно задать тип событию мыши?

В React для правильной типизации событий мыши используется интерфейс MouseEvent.

Для примера, давайте определим состояние компонента, в котором мы будем обрабатывать событие клика мыши:

import React, { useState } from 'react';

const MyComponent = () => {
  const [clickCount, setClickCount] = useState(0);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setClickCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <p>Click Count: {clickCount}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default MyComponent;

В приведенном примере мы определили handleClick как функцию, ожидающую событие типа React.MouseEvent<HTMLButtonElement>. Это означает, что мы ожидаем событие клика мыши на элементе <button>.

Используя интерфейс MouseEvent, мы можем получить доступ к различным свойствам события, таким как clientX, clientY, target, pageX, pageY и другие.

Таким образом, правильное задание типа событию мыши в React помогает избежать ошибок во время разработки и обеспечивает более надежный и понятный код.