React and TypeScript: How to find the right event type

React and TypeScript: How to find the right event type

When getting started with TypeScript, finding the right interfaces can be challenging. In this article, you'll learn how to find the correct TypeScript interface for React events in any situation.

JavaScript in the browser already includes a series of HTML events to which JavaScript can listen and react. The most used ones are events like onclick, or onchange, for instance.

However, these events' implementation and behavior vary between browsers. React solves this issue using  synthetic events, a wrapper around native events that works the same across all browsers.

When we add event handlers in React, we can't use the types that TypeScript includes in the  DOM library because React adds a wrapper around these events. Instead, we need to use the type definitions that React provides.

In JSX, you can easily see the difference between native and synthetic events by looking at the attribute. Native attributes are written in lower-case (onclick), while synthetic events use camelCase (onClick).

In this article you'll find:

  • React event types
  • What if there is no matching type definition?
  • Tip: How to find type definitions for any event
  • Conclusion

React event types

We can't use TypeScript's type definitions for events, but the good thing is that React has equivalent type definitions for all its synthetic events.

Let's say we want to add an event handler to the onChange event of an input element.

<input value={value} onChange={handleInputChange} />

The type of the handleInputChange function needs to match up with React's type definitions. In our case, we need to use React's ChangeEvent.

import React, { ChangeEvent } from 'react';

const App = () => {
  const [value, setValue] = React.useState('');

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <>
      <h1>Hi {value} 👋</h1>
      <input value={value} onChange={handleInputChange} />
    </>
  );
};

All synthetic event types are generic, so we can specify the exact element that this event refers to (between the angle brackets <>). TypeScript includes these definitions in the DOM lib, which is why you don't need to import them.

react typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native - React Navigation with TypeScript in React Mobile App

Learn how to set up React Navigation in a React Native project using TypeScript, routing for modals and nested navigation, type declaration for navigation, and route props.

Typescript in React — How to Add

In this article, I will be showing you how to add typescript from your existing react application. If you are a software developer that started from strongly typed programming languages.

How to Build Meme Generator with React, React Hooks and TypeScript

The best way to learn something is by doing. It works even better if it means working on something for fun. So, how about learning about React, React hooks and TypeScript by building your own meme generator? This tutorial will show you how to do it.

Step 7 - React tutorial- Functional React components in TypeScript

Step 7 in the "React, TypeScript, and TDD" tutorial. React builds UIs as a tree of components. See how to make stateless functional components correctly with TypeScript.