title: TypeScript React State without Props
body: <p>I'd like to take advantage of the static and strong typing in TypeScript, but only for the state since I don't intend to take in any props.</p>
  
  <p>When I attempt to pass the interface as such, I end up with an error:</p>
  
  <pre><code>import * as React from 'react';
  import {Link} from 'react-router-dom';
  import Constants from '../Constants';
  
  interface ILoginState {
     email: string;
     password: string;
     remember: boolean;
     error: string;
     isLoading: boolean;
  }
  
  class LoginView extends React.Component&lt;{}, ILoginState&gt; {
  
     constructor(props) {
        super(props);
  
        this.state = {
           email: '',
           password: '',
           remember: false,
           error: '',
           isLoading: false
        };
     }
  
   render() {
        return (&lt;div&gt;Login goes here&lt;/div&gt;
        );
     }
  }
  
  export default LoginView;
  </code></pre>
  
  <p>I end up with a compile error:</p>
  
  <pre><code>ERROR in [at-loader] ./src/scripts/pages/LoginView.tsx:41:21 
      TS2345: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'ILoginState | ((prevState: Readonly&lt;ILoginState&gt;, props: {}) =&gt; ILoginState | Pick&lt;ILoginState, "...'.
    Type '{ [x: number]: any; }' is not assignable to type 'Pick&lt;ILoginState, "email" | "password" | "remember" | "error" | "isLoading"&gt;'.
      Property 'email' is missing in type '{ [x: number]: any; }'.
  </code></pre>
  
  <p>I've also tried using 'any' in place of the empty brackets but that doesn't work either.</p>
  
  <p>Here's the line 41 (this.SetState...) that the trace is referring to:</p>
  
  <pre><code>   handleChange = event =&gt; {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        this.setState({
           [target.name]: value
        });
     }
  </code></pre>
  
  <p>Here are all examples where that's used:</p>
  
  <pre><code>&lt;input name="email" type="email" value={this.state.email} onChange={this.handleChange} /&gt;
  &lt;input name="password" type="password" value={this.state.password} onChange={this.handleChange} /&gt;
  &lt;input name="remember" type="checkbox" checked={this.state.remember} onChange={this.handleChange} /&gt;
  </code></pre>