title: Form in React and TypeScript with DRY handle of change
body: <p>I looking for best way manage state of form in React with TypeScript. My simple form have two values: <code>login</code> and <code>password</code> fields. I implement <code>IState</code> interface for form state and DRY <code>handleChange</code> method for store new value in state without recreating function in each <code>render()</code> execution.</p>
  
  <pre><code>interface IState {
    login: string;
    password: string;
  }
  
  class LoginForm extends React.Component&lt;{}, IState&gt; {
    public state = {
      login: "",
      password: "",
    };
  
    public render() {
      const { login, password } = this.state;
      return (
        &lt;form&gt;
          &lt;input name="login" value={login} onChange={this.handleChange}/&gt;
          &lt;input name="password" value={password} onChange={this.handleChange} type="password"/&gt;
        &lt;/form&gt;
      );
    }
  
    private handleChange = (e: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {
      const { name, value } = e.currentTarget;
      const n = name as keyof IState;
      // @ts-ignore
      this.setState({
        [n]: value,
      });
    }
  }
  </code></pre>
  
  <p>I use native HTML's <code>name</code> attribute for store field name. <code>n</code> variable will have only <code>login</code> or <code>password</code> value. Any other value is impossible. Can I tell TypeScript the <code>n</code> variable is <code>"login" | "password"</code> literals type? TypeScript regard <code>n</code> as <code>string</code> type variable even I use:</p>
  
  <pre><code>const n = name as keyof IState;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>const n = name as "login" | "password";
  </code></pre>
  
  <p>Then, when I remove <code>// @ts-ignore</code> I get error:</p>
  
  <pre><code>Type error: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'IState | Pick&lt;IState, "login" | "password"&gt; | ((prevState: Readonly&lt;IState&gt;, props: Readonly&lt;IProps&gt;) =&gt; IState | Pick&lt;IState, "login" | "password"&gt; | null) | null'.
  Type '{ [x: string]: string; }' is missing the following properties from type 'Pick&lt;IState, "login" | "password"&gt;': login, password  TS2345
  </code></pre>
  
  <p>but no error when I hardcode:</p>
  
  <pre><code>const n = "login";
  </code></pre>
  
  <p>Any way to force <code>"login" | "password"</code> type to <code>n</code> variable? Or any other solution for DRY <code>handleChange</code> without optimization issues and pure TypeScript?</p>