How to type Redux actions and Redux reducers in TypeScript?

Question

What is the best way to cast the action parameter in a redux reducer 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:

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              } } 

The problem is that action needs to be cast as a type that has access to both IActionA and IActionB so the reducer can use both action.a and action.a without throwing an error.

I have several ideas how to work around this issue:

1. Cast action to any.
2. Use optional interface members.

example:

interface IAction {     type: string     a?: string     b?: string } 

3. Use different reducers for every action type.

What is the best way to organize Action/Reducers in typescript? Thank you in advance!

Answer 1

With Typescript 2's Tagged Union Types you can do the following

interface ActionA {     type: 'a';     a: string }  interface ActionB {     type: 'b';     b: string }  type Action = ActionA | ActionB;  function reducer(action:Action) {     switch (action.type) {         case 'a':             return console.info('action a: ', action.a)          case 'b':             return console.info('action b: ', action.b)               } }