typesafe select onChange event using reactjs and typescript

Question

I have figured out how to tie up an event handler on a SELECT element using an ugly cast of the event to any.

Is it possible to retrieve the value in a type-safe manner without casting to any?

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent) {
        console.log("Test.change");
        console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select>

        // Use cast to any works but is not type safe
        var unsafeSearchTypeValue = ((event.target) as any).value;

        console.log(unsafeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: unsafeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}

I guess it means compiled by typescript and check that all variables assignement are allright from their type. We are talking about typescript, of course, not javascript — Cyril Gandon
– Cyril Gandon, Commented Oct 21, 2015 at 12:05

Sergei Basharov · Accepted Answer · 2018-07-23 17:47:29Z

134

I tried using React.FormEvent<HTMLSelectElement> but it led to an error in the editor, even though there is no EventTarget visible in the code:

The property 'value' does not exist on value of type 'EventTarget'

Then I changed React.FormEvent to React.ChangeEvent and it helped:

private changeName(event: React.ChangeEvent<HTMLSelectElement>) {
    event.preventDefault();
    this.props.actions.changeName(event.target.value);
}

edited Jul 23, 2018 at 17:47

answered Jun 8, 2017 at 11:56

Sergei Basharov

54.4k78 gold badges211 silver badges354 bronze badges

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

2 Comments

Capaj Over a year ago

this should be the top asnwer, FormEvent always shows error if I access e.target.value

TheDiveO Over a year ago

This seems to be corrected as I can now successfully access event.target.value without issues; it is typed as string, so double casting might be necessary depending on the value type used in the concrete situation. For instance event.target.value as unknown as number.

davestevens · Accepted Answer · 2017-01-03 10:49:18Z

81

Since upgrading my typings to react 0.14.43 (I'm not sure exactly when this was introduced), the React.FormEvent type is now generic and this removes the need for a cast.

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent<HTMLSelectElement>) {
        // No longer need to cast to any - hooray for react!
        var safeSearchTypeValue: string = event.currentTarget.value;

        console.log(safeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: safeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}

edited Jan 3, 2017 at 10:49

answered Oct 27, 2016 at 13:43

davestevens

2,3232 gold badges18 silver badges19 bronze badges

3 Comments

Martin Majewski Over a year ago

As of Dec. 2016 one has to use event.currentTarget.value to get the data from the form.

Alex Over a year ago

Dave, consider updating your example.

davestevens Over a year ago

@MartinMajewski I have edited to use currentTarget (joequery.me/code/event-target-vs-event-currenttarget-30-seconds is a good explanation)

Audwin Oyong · Accepted Answer · 2021-08-18 19:08:33Z

29

In my case onChange event was typed as React.ChangeEvent<HTMLSelectElement>:

onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
  console.warn('onChange TextInput value: ' + e.target.value);
}}

edited Aug 18, 2021 at 19:08

Audwin Oyong

2,5273 gold badges21 silver badges37 bronze badges

answered Mar 21, 2019 at 16:25

Jackkobec

6,9871 gold badge42 silver badges39 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

12

Update: the official type-definitions for React have been including event types as generic types for some time now, so you now have full compile-time checking, and this answer is obsolete.

Is it possible to retrieve the value in a type-safe manner without casting to any?

Yes. If you are certain about the element your handler is attached to, you can do:

<select onChange={ e => this.selectChangeHandler(e) }>
    ...
</select>

private selectChangeHandler(e: React.FormEvent)
{
    var target = e.target as HTMLSelectElement;
    var intval: number = target.value; // Error: 'string' not assignable to 'number'
}

Live demo

The TypeScript compiler will allow this type-assertion, because an HTMLSelectElement is an EventTarget. After that, it should be type-safe, because you know that e.target is an HTMLSelectElement, because you just attached your event handler to it.

However, to guarantee type-safety (which, in this case, is relevant when refactoring), it is also needed to check the actual runtime-type:

if (!(target instanceof HTMLSelectElement))
{
    throw new TypeError("Expected a HTMLSelectElement.");
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 29, 2016 at 20:23

John Weisz

32.1k14 gold badges97 silver badges138 bronze badges

4 Comments

davestevens Over a year ago

I suppose that is better than casting to any, but you are still using type assertion, and that is what I was trying to avoid.

John Weisz Over a year ago

Yes, but since you are entirely certain that e.target is an HTMLSelectElement, this type-assertion is safe, and all subsequent type-checking is inherently safe as well, such as target.value. If you want to make it absolutely bulletproof, you could do a runtime check for its type as well, and throw a TypeError if e.target is not of the correct type. This will never actually happen, but it adds an additional layer of guaranteed type-safety.

davestevens Over a year ago

stackoverflow.com/questions/260626/what-is-type-safe what I understand by typesafe is that the type checking is imposed by the compiler. That means no type assertions and not depending on runtime exceptions.

Matt Browne Over a year ago

I previously commented that the event handler should be public, not private. I have since realized that was incorrect. Even if we had private methods at run-time (which hopefully we will in the future), a private method would still work fine here, because React doesn't need to call the private method directly but only the arrow function you're passing as the onChange prop.

Петр Графинов · Accepted Answer · 2017-06-26 12:27:40Z

10

it works:

type HtmlEvent = React.ChangeEvent<HTMLSelectElement>

const onChange: React.EventHandler<HtmlEvent> = 
   (event: HtmlEvent) => { 
       console.log(event.target.value) 
   }

answered Jun 26, 2017 at 12:27

Петр Графинов

1011 silver badge2 bronze badges

Comments

thoughtrepo · Accepted Answer · 2015-10-21 16:20:30Z

9

The easiest way is to add a type to the variable that is receiving the value, like this:

var value: string = (event.target as any).value;

Or you could cast the value property as well as event.target like this:

var value = ((event.target as any).value as string);

Edit:

Lastly, you can define what EventTarget.value is in a separate .d.ts file. However, the type will have to be compatible where it's used elsewhere, and you'll just end up using any again anyway.

globals.d.ts

interface EventTarget {
    value: any;
}

edited Oct 21, 2015 at 16:20

answered Oct 21, 2015 at 14:51

thoughtrepo

8,4132 gold badges30 silver badges21 bronze badges

4 Comments

davestevens Over a year ago

I was hoping to get rid of the "as any" cast completely.

davestevens Over a year ago

Thanks for your thoughts, but that still doesn't answer my question. I think the answer is that the .d.ts of react would need to be modified so that the signature of the onChange of a SELECT element used a new SelectFormEvent. Otherwise as you point out it needs a cast. I guess I could encapsulate that in a MYSELECT tag.

thoughtrepo Over a year ago

Okay, don't forget to answer and accept your answer :) Self answer

JasonS Over a year ago

A better way of adding EventTarget.value is to augment the global eventTarget, which can be done via any .ts file: declare global { interface EventTarget { value: any; }}

Marco Lackovic · Accepted Answer · 2021-08-01 20:53:05Z

6

JSX:

<select value={ this.state.foo } onChange={ this.handleFooChange }>
    <option value="A">A</option>
    <option value="B">B</option>
</select>

TypeScript:

private handleFooChange = (event: React.FormEvent<HTMLSelectElement>) => {
    const element = event.target as HTMLSelectElement;
    this.setState({ foo: element.value });
}

edited Aug 1, 2021 at 20:53

answered Jan 31, 2019 at 10:11

Marco Lackovic

6,6248 gold badges58 silver badges60 bronze badges

Comments

davestevens · Accepted Answer · 2015-10-23 08:02:16Z

3

As far as I can tell, this is currently not possible - a cast is always needed.

To make it possible, the .d.ts of react would need to be modified so that the signature of the onChange of a SELECT element used a new SelectFormEvent. The new event type would expose target, which exposes value. Then the code could be typesafe.

Otherwise there will always be the need for a cast to any.

I could encapsulate all that in a MYSELECT tag.

answered Oct 23, 2015 at 8:02

davestevens

2,3232 gold badges18 silver badges19 bronze badges

Comments

Artur Ampilogov · Accepted Answer · 2016-08-29 20:00:08Z

0

In addition to @thoughtrepo's answer:

Until we do not have definitely typed events in React it might be useful to have a special target interface for input controls:

export interface FormControlEventTarget extends EventTarget{
    value: string;
}

And then in your code cast to this type where is appropriate to have IntelliSense support:

 import {FormControlEventTarget} from "your.helper.library"

 (event.target as FormControlEventTarget).value;

answered Aug 29, 2016 at 20:00

Artur Ampilogov

9,4991 gold badge64 silver badges64 bronze badges

Comments

JeffBeltran · Accepted Answer · 2024-07-01 20:27:57Z

0

you should be using e.currentTarget vs e.target see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 for a good understanding of what is happening

answered Jul 1, 2024 at 20:27

JeffBeltran

7399 silver badges17 bronze badges

Collectives™ on Stack Overflow

typesafe select onChange event using reactjs and typescript

10 Answers 10

2 Comments

3 Comments

Comments

4 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

3 Comments

Comments

4 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related