How to type Redux actions and Redux reducers in TypeScript?
<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>