JIYIK CN >

In React, you often need to listen to event listeners that are triggered due to certain operations on certain HTML elements. TypeScript has strong typing support for all events triggered due to certain operations on HTML elements, such as touch, click, focus, and other operations.

This article will demonstrate how to add types to different events in React.

Adding types to React events in TypeScript

React has types for various HTML events that are triggered by operations on the DOM. Events are triggered as a result of some operation, such as clicking or changing some input element.

An example of an event trigger is a standard HTML text box.

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

jsxAn example of this is shown above , where handleValueChangereceives a eventobject that references events that are triggered due to changes in the input in the text input box.

Considering the example of the React snippet, handleValueChangethe appropriate type must be added to the event passed to the function.

const InputComponent = () => {
    const [ value, setValue ] = React.useState<string>("");

    const handleValueChange :  React.ChangeEventHandler<HTMLInputElement> = (event) => {
        setValue(event.target.value);
    }

    return (
            <input value={value} onChange={handleValueChange}/>
    )
}

So the type ChangeEventHandler<HTMLInputElement>is the type of the text changed event in the input text box. It can be imported from React, for example import {ChangeEventHandler} from 'react'.

This type can also React.FormEvent<HTMLInputElement>be expressed using the type. Some useful type aliases for React events can be:

type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
type TextAreaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>

// can be used as
const handleOptions : SelectChangeEventHandler = (event) => {

}

SyntheticEventUsing React types for events in TypeScript

React SyntheticEventtypes act as a wrapper around all event types and can be used if strong type safety is not required. Type assertions can be used for certain inputs as needed.

const FormElement = () => {
    return (
        <form
        onSubmit={(e: React.SyntheticEvent) => {
            e.preventDefault();

            // type assertions done on the target
            const target = e.target as typeof e.target & {
                email: { value: string };
                password: { value: string };
            };
            const email = target.email.value;
            const password = target.password.value;

        }}
        >
            <div>
                <label>
                Email:
                <input type="email" name="email" />
                </label>
            </div>
            <div>
                <label>
                Password:
                <input type="password" name="password" />
                </label>
            </div>
            <div>
                <input type="submit" value="Sign in" />
            </div>
        </form>
    )
}

Handling keyboard events in TypeScript

Keyboard events are fired when a key is pressed on the keyboard. React has good support for typing keyboard events.

const handleKeyBoardPress = (event : React.KeyboardEvent<Element>) => {
    if (event.key === 'Enter'){
        // do something on press of enter key
    }
}

It can also be represented as an event handler.

const handleKeyBoardPress : KeyboardEventHandler<Element> = (event) => {
    if (event.key === 'Enter'){
        // do something on press of enter key
    }
}

ElementIt is a component that encapsulates the following functions handleKeyBoardPress.

Handling mouse events in TypeScript

Mouse events can also be supported by adding types in TypeScript. Type assertions are required to access methods associated with the HTML element that triggers the mouse event.

const handleOnClick : React.MouseEventHandler<HTMLInputElement> = (event) => {
    const HTMLButton = e.target as HTMLElement;
}