title: How to type Redux actions and Redux reducers in TypeScript?
body: <p>What is the best way to cast the <code>action</code> parameter in a redux <a href="http://redux.js.org/docs/basics/Reducers.html" rel="noreferrer">reducer</a> with typescript? There will be multiple action interfaces that can occur that all extend a base interface with a property type. The extended action interfaces can have more properties that are all different between the action interfaces. Here is an example below:</p>
  
  <pre><code>interface IAction {
      type: string
  }
  
  interface IActionA extends IAction {
      a: string
  }
  
  interface IActionB extends IAction {
      b: string
  }
  
  const reducer = (action: IAction) {
      switch (action.type) {
          case 'a':
              return console.info('action a: ', action.a) // property 'a' does not exists on type IAction
  
          case 'b':
              return console.info('action b: ', action.b) // property 'b' does not exists on type IAction         
      }
  }
  </code></pre>
  
  <p>The problem is that <code>action</code> needs to be cast as a type that has access to both <code>IActionA</code> and <code>IActionB</code> so the reducer can use both <code>action.a</code> and <code>action.a</code> without throwing an error. </p>
  
  <p>I have several ideas how to work around this issue:</p>
  
  <ol>
  <li>Cast <code>action</code> to <code>any</code>.</li>
  <li>Use optional interface members.</li>
  </ol>
  
  <p>example: </p>
  
  <pre><code>interface IAction {
      type: string
      a?: string
      b?: string
  }
  </code></pre>
  
  <ol start="3">
  <li>Use different reducers for every action type.</li>
  </ol>
  
  <p>What is the best way to organize Action/Reducers in typescript? Thank you in advance!</p>