Why is the `MouseEvent` in the checkbox event handler not generic?

I have an checkbox TSX(JSX) element:

<input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} />

With the help of VS code I know that the input parameter type of the this.handleCheckboxClick is MouseEvent<HTMLInputElement>. So I implemented it with:

private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) {
    ...
}

Then I get an error saying [ts] Type 'MouseEvent' is not generic. As shown in the image below:

enter image description here

Version of my packages:

"@types/react": "^15.0.29",
"@types/react-dom": "^15.5.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.3.4",

Why is that?


You're probably using the DOM MouseEvent. Try using React.MouseEvent<HTMLInputElement> instead.


In order to use React MouseEvent just make sure to add:

import { MouseEvent } from 'react';

You can use SyntheticEvent instead of MouseEvent