React event type in Typescript

I think what's happening here is that there are two distinct types available: MouseEvent from jsx/lib/js/js/web.jsx (which has no type parameters), and React.MouseEvent<T> from @types/react/index.d.ts (which has one type parameter, T, the type of the element from which it came). Typescript uses structural typing, so even though they are distinct types, they can be compatible. But in order to be compatible with the onClick handler you need to use React's version, with an appropriate type for T (HTMLElement will work, or you can be more specific if you know what element you're attaching this handler to).

So event: MouseEvent fails because onClick requires the specialized version of the event type. event: MouseEvent<HTMLElement> fails because it refers to the wrong MouseEvent type, the one without a type parameter. React.MouseEvent<HTMLElement> works because you get the proper type, give it the parameter it needs, and the resulting type is compatible with the onClick handler.

I had the same issue but was able to fix it by explicity importing the MouseEvent from React

I had the error with this

import React from 'react';

But fixed with this

import React, { MouseEvent } from 'react';

You won't belive it: It was enough to move constructor assigment to render function:

render(){return (<button onClick={ this.Button_Click.bind(this) }>Toggle</button>)}

Then MouseEvent become avaliable:

private Button_Click(event: MouseEvent): void

Why this is happening?