Typescript: React event types
To combine both Nitzan's and Edwin's answers, I found that something like this works for me:
update = (e: React.FormEvent<EventTarget>): void => {
let target = e.target as HTMLInputElement;
this.props.login[target.name] = target.value;
}
The problem is not with the Event type, but that the EventTarget interface in typescript only has 3 methods:
interface EventTarget {
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
dispatchEvent(evt: Event): boolean;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
So it is correct that name
and value
don't exist on EventTarget. 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
.
update = (e: React.SyntheticEvent): void => {
let target = e.target as HTMLInputElement;
this.props.login[target.name] = target.value;
}
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.
The best way to see all these type definitions is to checkout the .d.ts files from both typescript & react.
Also check out the following link for more explanations: Why is Event.target not Element in Typescript?
The SyntheticEvent interface is generic:
interface SyntheticEvent<T> {
...
currentTarget: EventTarget & T;
...
}
(Technically the currentTarget
property is on the parent BaseSyntheticEvent type.)
And the currentTarget
is an intersection of the generic constraint and EventTarget
.
Also, since your events are caused by an input element you should use the ChangeEvent
(in definition file, the react docs).
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
. The discussion in the comments is related to this suggestion, but React.ChangeEvent
should be used as shown above.)