TypeScript and event.target || event.srcElement

Question

I am new to TypeScript, and rewriting an arrow function in React.js.

This is what it currently looks like:

  handleChange = (event): void => {
    const target = event.target || event.srcElement;

    this.setState({
      value: target.value
    });
  };

handleChange() doesn't return anything and only mutates state, so it's type is set to void.

What types should event and target have in this scenario? I need to support the widest range of browsers possible and so this is why target could be event.target or event.srcElement, if event.target is undefined.

Any help on this would be greatly appreciated.

UPDATED FUNCTION:

  handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    this.setState({
      value: event.target.value
    });
  };

Chris B. · Accepted Answer · 2019-09-11 00:12:29Z

1

Event is of the type React.MouseEvent, target will depend on the element that's being clicked on. You can pass in the element as a generic type to the MouseEvent type, so there's no need to explicitly type the target element, as that will be determined by the generic. For example:

handleChange = (event: React.MouseEvent<HTMLButtonElement>): void => {
    const target = event.target || event.srcElement;

    this.setState({
      value: target.value
    });
  };

would be accurate if the element being clicked is a standard HTML button element.

EDIT: Looks like I forgot non-mouse events exist. Similar types exist in React type definitions for most all commonly used events. If you're handling a custom event or the appropriate type doesn't exist, use SyntheticEvent. If you're looking for a specific event, try searching through the official typings.

Also note that Typescript types will have no bearing on browser support. Typescript really only exists in development to enforce more thoughtful programming habits and prevent errors, but it's ultimately transpiled to regular JavaScript before being deployed, so an inaccurate typing will not have tangible consequences provided that it compiles (apart from bugs it might cause).

edited Sep 11, 2019 at 0:12

answered Sep 11, 2019 at 0:06

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DanMad Over a year ago

This is really interesting. I changed <HTMLButtonElement> to <HTMLInputElement> because I'm dealing with radio buttons—this made sense to me. I also changed React.MouseEvent to React.ChangeEvent as I was getting an error on my onChange prop and this was recommended. I am now getting an error regarding event.srcElement. I've included it in my edit above.

Chris B. Over a year ago

What element is it applied to? I have a change handler on an input typed as: const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputValue(e.target.value); }; without any errors. It's probably srcElement, seems it's a browser-specific alias for target that only exists in IE, so the typings don't support it. If you have to use that property, you may end up having to //@ts-ignore it, but target is supported in all versions of IE, so it shouldn't be necessary.

DanMad Over a year ago

Yes, you're right. Will post the updated function above. TY for answering my question.

Collectives™ on Stack Overflow

TypeScript and event.target || event.srcElement

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related