What is the correct TypeScript event type for React events?

General Discussions
#1

What is the correct TypeScript event type for React events? Initially, I used any for simplicity, but now I’m trying to clean things up and avoid using any entirely.

React.SyntheticEvent does not seem to work as I get an error that name and value do not exist on target.

What TypeScript event type should I use ?

A more generalised answer for all events would be really appreciated.

Thanks

#2

The SyntheticEvent interface in React is generic:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
}

The currentTarget is an intersection of the generic constraint and EventTarget. Since your events are caused by an input element, you should use the ChangeEvent interface.

The correct implementation should be:

update = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value;
}

(Note: This answer originally suggested using React.FormEvent, but React.ChangeEvent should be used as shown above.)

#3

I believe the simplest way is to define the event types as follows:

type InputEvent = React.ChangeEvent<HTMLInputElement>;
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;

Then, use these types in your event handlers:
update = (e: InputEvent): void => {
    this.props.login[e.target.name] = e.target.value;
};

submit = (e: ButtonEvent): void => {
    this.props.login.logIn();
    e.preventDefault();
};