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 lt     ITestState gt         constructor             super            this state     selectedValue   A                change event  React FormEvent            console log  Test change            console log event target      in chrome   gt   lt select class  form-control  id  searchType  data-reactid   0 0 0 0 3 1  gt     lt  select gt              Use cast to any works but is not type safe         var unsafeSearchTypeValue     event target  as any  value           console log unsafeSearchTypeValue      in chrome   gt  B          this setState               selectedValue  unsafeSearchTypeValue                        render             return                lt div gt                   lt label htmlFor  searchType  gt Safe lt  label gt                   lt select className  form-control  id  searchType  onChange   e   gt  this change e    value   this state selectedValue   gt                       lt option value  A  gt A lt  option gt                       lt option value  B  gt B lt  option gt                   lt  select gt                   lt h1 gt  this state selectedValue  lt  h1 gt               lt  div gt

User · Answer

it works       type HtmlEvent   React ChangeEvent lt HTMLSelectElement gt   const onChange  React EventHandler lt HtmlEvent gt         event  HtmlEvent    gt            console log event target value

User · Answer

I tried using React FormEvent lt HTMLSelectElement gt  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 lt HTMLSelectElement gt         event preventDefault        this props actions changeName event target value

User · Answer

In my case onChange event was typed as React ChangeEvent   onChange    e  React ChangeEvent lt HTMLSelectElement gt     gt               console warn  onChange TextInput value      e target value

User · Answer

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 lt     ITestState gt         constructor             super            this state     selectedValue   A                change event  React FormEvent lt HTMLSelectElement gt                No longer need to cast to any - hooray for react          var safeSearchTypeValue  string   event currentTarget value           console log safeSearchTypeValue      in chrome   gt  B          this setState               selectedValue  safeSearchTypeValue                        render             return                lt div gt                   lt label htmlFor  searchType  gt Safe lt  label gt                   lt select className  form-control  id  searchType  onChange   e   gt  this change e    value   this state selectedValue   gt                       lt option value  A  gt A lt  option gt                       lt option value  B  gt B lt  option gt                   lt  select gt                   lt h1 gt  this state selectedValue  lt  h1 gt               lt  div gt

User · Answer

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   lt select onChange   e   gt  this selectChangeHandler e    gt           lt  select gt   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  quot Expected a HTMLSelectElement  quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

JSX    lt select value   this state foo   onChange  this handleFooChange  gt       lt option value  A  gt A lt  option gt       lt option value  B  gt B lt  option gt   lt  select gt    TypeScript   private handleFooChange    event  React FormEvent lt HTMLSelectElement gt     gt        const element   event target as HTMLSelectElement      this setState   foo  element value

[javascript] typesafe select onChange event using reactjs and typescript

Examples related to javascript

Examples related to reactjs

Examples related to typescript