Recently, I created a component with a click handler that looks like this:
onClick={(e) => {
e.stopPropagation();
}}
It seems clear to me, but then the Typescript compiler complains that it's not a valid signature for onClick
, which actually accepts either undefined
or
React.MouseEventHandler<HTMLDivElement>
. It is pretty obvious what is being passed in. However, when I try to infer the parameter type, it shows:
e: { stopPropogation: () => void; }
This results in an incorrect compilation as well. My frustration arises from the fact that even after examining the definition of onClick
, I am still uncertain about the parameter type - I see that it's
React.MouseEventHandler<HTMLDivElement>
, which maps to EventHandler<MouseEvent<T>>
, with EventHandler
being defined as:
type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];
This doesn't provide much information. While it may seem logical that MouseEvent<HTMLDivElement>
could work, there's uncertainty due to the mysterious 'bivarianceHack'. Is there any mistake on my end, or is it really this complex to determine the function parameter type and the inference system can't do any better?