DEV Community

Cover image for Typescript event types for React
Fateh Mohamed 🐢
Fateh Mohamed 🐢

Posted on

22

Typescript event types for React

When you migrate your React applications from Javascript to Typescript you want everything to be typed right! and If you start having the type any it means that you are in the wrong direction 😞

Ok cool, you have to create your own types, interfaces... but what about React types, for instance React Events types.
For instance you have a submit event



 const handleSubmit = (event) => {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    })
  }


Enter fullscreen mode Exit fullscreen mode

Typescript is complaining and you need to provide a type for your event

Image description

You need to know what type is your event here, but how? 🤔
All what you have to do is to write an inline event handler and hover over the event parameter to know that it's of type React.FormEvent<HTMLFormElement> 👍

Image description

Great! Here is your new code and Typescript is happy



const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
 ...


Enter fullscreen mode Exit fullscreen mode

Till now everything is good but can't you see that it's a long ugly type 😫 You can make it shorter and nicer.

Let us create a new types file types.ts where we can create new types or in our case only renaming existing ugly ones. Examples bellow



type FormEvent = React.FormEvent<HTMLFormElement>
type MouseEvent = React.MouseEvent<HTMLButtonElement>
type ChangeEvent = React.ChangeEvent<HTMLInputElement>
...

export { FormEvent, MouseEvent, ChangeEvent };


Enter fullscreen mode Exit fullscreen mode

Now our React.FormEvent<HTMLFormElement> type became FormEvent 😎

Again here is how our code will look like now



import { FormEvent } from './types'

const handleSubmit = (event: FormEvent) => {
 ...


Enter fullscreen mode Exit fullscreen mode

Short, Clean and Correct.

Thanks for reading and hope it was helpful

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (1)

Collapse
 
muhammadiqbalid83 profile image
Muhammad Iqbal

Thanks

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay