React uses its own event system called SyntheticEvent to provide a consistent interface for handling user interactions across browsers. When you work with mouse events like onClick and onMouseEnter in React, these handlers receive a synthetic event object that wraps the native browser event. TypeScript allows you to type these event handler functions so you can access event properties confidently and catch mistakes at compile time.

To type mouse event handlers in React, you use the React.MouseEvent type. This type includes all the properties you expect from a mouse event, such as clientX, clientY, button, and more. Typing your handlers ensures you get autocompletion and type safety when accessing these properties.

Here is how you type mouse event handlers for common events in a functional component:

function ClickableButton() {
  // The event type is React.MouseEvent<HTMLButtonElement>
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log('Button clicked at:', event.clientX, event.clientY);
  };

  // The event type is React.MouseEvent<HTMLDivElement>
  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
    console.log('Mouse entered div at:', event.clientX, event.clientY);
  };

  return (
    <div onMouseEnter={handleMouseEnter}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

In these examples, you specify the element type in angle brackets, such as HTMLButtonElement or HTMLDivElement, to let TypeScript know which element triggered the event. This enables even more precise typing, so you can access properties and methods specific to that element.