React event type in Typescript

typescript onclick event type
typescript onchange event type
typescript event
react typescript
typescript dom event type
typescript onclick event type angular
react-keyboard events
react synthetic event

I can't build my React/Typescript app when I use MouseEvent type in my event handler:

private ButtonClickHandler(event: MouseEvent): void

I get:

error TS2322: Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ onClick: (event: MouseEvent) => void; children: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property 'onClick' are incompatible.
      Type '(event: MouseEvent) => void' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'MouseEvent<HTMLButtonElement>' is not assignable to type 'MouseEvent'.
            Property 'fromElement' is missing in type 'MouseEvent<HTMLButtonElement>'.`

I also tried MouseEvent<HTMLButtonElement> but then I got error TS2315: Type 'MouseEvent' is not generic..


Excerpt from my package.json:

 "devDependencies": {
    "@types/react": "^16.0.7",
    "@types/react-dom": "^15.5.5",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"

Edit #1:

Binding in render():

<button onClick={ this.ButtonClickHandler }>Toggle</button>

in constructor:

this.ButtonClickHandler = this.ButtonClickHandler.bind(this);

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.

Typescript: React event types, What you need to do is to cast the target to the specific element type with the properties you need. In this case it will be HTMLInputElement . Also for events instead of React. SyntheticEvent, you can also type them as following: Event , MouseEvent , KeyboardEvent etc, depends on the use case of the handler. React event arguments are typically typed using the *Event suffix and take a generic argument representing the element being targeted. In the case above, the onChange event is being added to a HTMLInputElement which is not React-specific and available through TypeScript's built-in typings.

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';

React Typescript cheatsheet: form elements and onChange event , React Typescript cheatsheet: form elements and onChange event types. As it's counterpart, the value of ev. target. value will be a string, but the majority of cases we will want to use it to get a number. In the Formik documentation for React Native it has an example form: <Formik initialValues={{ email: '' }} onSubmit={(values) => console.log(values

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

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

Then MouseEvent become avaliable:

private Button_Click(event: MouseEvent): void

Why this is happening?

TypeScript Event Handlers, After a recent talk on TypeScript and React, a few minutes of open Q&A led into a lively discussion about typing event handlers in both React� All the form elements events are the type React.ChangeEvent<T>, where T is the HTML Element type. Here’s an example of all the different HTML types For <input type="text"> the event type is React.ChangeEvent<HTMLInputElement> const Input = (): JSX.Element => {

SyntheticEvent – React, Learning Typescript with React can be challenging, and in my case, MouseEvent<HTMLButtonElement>) => { const type: string = event. TypeScript’s quirky implementation of DOM events, however, leads to an interesting conversation about expectations, tradeoffs, and the challenge of trying to type a dynamic language like JavaScript. But first, React. React event handlers receive synthetic, React-specific events.

Part One: Using Typescript with React, Using React's type definitions; 3. Defining types for props and state; 4. Defining event handlers for elements; 5. Going forward. Setting� In React v16.8.0, React Hooks were released, a first-class solution that solves the majority of use cases of higher-order components, and are significantly simpler to set types for. I would

Using React with Typescript - Soham's blog, Handling events. We can type our event handlers to ensure that our event argument is typed properly. The below example demonstrates various� So, the solution I could come up with was, extending the event related types to add your target type, as: interface MyEventTarget extends EventTarget { value: string } interface MyFormEvent<T> extends React.FormEvent<T> { target: MyEventTarget } interface InputProps extends React.HTMLProps<Input> { onChange?:

  • Could you please show us the code where you binding this handler to element? I think there could be a root cause of this problem
  • You mean binding in render and constructor? Added in edit #1
  • Did you try (event: React.MouseEvent<HTMLButtonElement>)?
  • Yes, same efect. It seems other people don't have such problems:…
  • private ButtonClickHandler(event: React.MouseEvent<HtmlButtonElement>): void should work
  • thanks helped me too. it seems a shame such basic issues are failing for typescript out of the box with react. adding an onClick event requires this much google fu to get it to work.