title: react, typescript - how to set state properties with different types
body: <p>How do I set state using type annotations when my state properties have different types? For example here I would want to write two methods - one to set strings and one to set numbers:</p>
  
  <pre><code>import React, {Component} from 'react'
  
  interface State {
    a: string
    b: string
    c: number
    d: number
  }
  
  class TestComponent extends Component&lt;any, State&gt; {
    state:State = {
      a: 'test',
      b: 'test',
      c: 1,
      d: 1
    }
  
    setStringProperty = (key:keyof State, value:string) =&gt; {
      this.setState({
        [key]:value
      })
    }
  
  
    render () {
      return &lt;div&gt;test&lt;/div&gt;
    }
  }
  
  export default TestComponent
  </code></pre>
  
  <p>But I am getting the following error:</p>
  
  <blockquote>
    <p>Error:(19, 19) TS2345: Argument of type '{ [x: string]: string; }' is
    not assignable to parameter of type 'State | ((prevState:
    Readonly, props: Readonly) => State | Pick | null) | Pick | null'.
    Type '{ [x: string]: string; }' is missing the following properties
    from type 'Pick': a, b, c, d</p>
  </blockquote>
  
  <p>While this makes sense I do not see how I could write a general method for setting different state properties (either of the same type or different types)?</p>