title: typesafe select onChange event using reactjs and typescript
body: <p>I have figured out how to tie up an event handler on a SELECT element using an ugly cast of the event to any.</p>
  
  <p>Is it possible to retrieve the value in a type-safe manner without casting to any?</p>
  
  <pre><code>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;
          );
      }
  }
  </code></pre>