title: Typescript: React event types
body: <p>What is the correct type for React events. Initially I just used <code>any</code> for the sake of simplicity. Now, I am trying to clean things up and avoid use of <code>any</code> completely.</p>
  
  <p>So in a simple form like this:</p>
  
  <pre><code>export interface LoginProps {
    login: {
      [k: string]: string | Function
      uname: string
      passw: string
      logIn: Function
    }
  }
  @inject('login') @observer
  export class Login extends Component&lt;LoginProps, {}&gt; {
    update = (e: React.SyntheticEvent&lt;EventTarget&gt;): void =&gt; {
      this.props.login[e.target.name] = e.target.value
    }
    submit = (e: any): void =&gt; {
      this.props.login.logIn()
      e.preventDefault()
    }
    render() {
      const { uname, passw } = this.props.login
      return (
        &lt;div id='login' &gt;
          &lt;form&gt;
            &lt;input
              placeholder='Username'
              type="text"
              name='uname'
              value={uname}
              onChange={this.update}
            /&gt;
            &lt;input
              placeholder='Password'
              type="password"
              name='passw'
              value={passw}
              onChange={this.update}
            /&gt;
            &lt;button type="submit" onClick={this.submit} &gt;
              Submit
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>What type do I use here as event type?</p>
  
  <p><code>React.SyntheticEvent&lt;EventTarget&gt;</code> does not seem to be working as I get an error that <code>name</code> and <code>value</code> do not exist on <code>target</code>.</p>
  
  <p>More generalised answer for all events would be really appreciated.</p>
  
  <p>Thanks</p>