TypeScript Redux AnyAction doesn't accept extraProps

Question

I have the following code:

//********** From Redux type declarations ************
export interface Action<T = any> {
  type: T
}

export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

//***********************************

type ActionHandler<TState> = (state: TState, action: AnyAction) => TState

interface SomeState {
    prop1: number
    prop2: string
}

interface FooAction extends Action {
    prop2: string
}

//This also doesnt work
// interface FooAction extends AnyAction {
//     prop2: string
// }

const foo: ActionHandler<SomeState> = (state: SomeState, action: FooAction): SomeState => {
    return {
        ...state,
        prop2: action.prop2
    }
}

And when I compile, I get the following error:

Type '(state: SomeState, action: FooAction) => SomeState' is not assignable to type 'ActionHandler<SomeState>'.
  Types of parameters 'action' and 'action' are incompatible.
    Property 'prop2' is missing in type 'AnyAction' but required in type 'FooAction'.ts(2322)

Any idea why do I get this error if AnyAction allows adding dynamic keys?

https://stackoverflow.com/questions/51767338/what-is-the-benefit-of-using-strictfunctiontypes-in-typescript — sylvanaar, Jan 09 '20 at 15:44

score 0 · Answer 1 · answered Jan 10 '20 at 12:48

Heyo.

This is because your type above would narrow down the action parameter to a subset - but in functions, you can only create functions of the same type that accept a superset of the parameters. If you want more, read into covariance and contravariance, for example this article or this part of the TS changelog

As for your problem: you can just write your ActionHandler type a little different to do the restriction you actually want (see the second generic parameter):

//********** From Redux type declarations ************
export interface Action<T = any> {
  type: T
}

export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

//***********************************

type ActionHandler<TState, Action extends AnyAction> = (state: TState, action: Action) => TState

interface SomeState {
    prop1: number
    prop2: string
}

interface FooAction extends Action {
    prop2: string
}

//This also doesnt work
// interface FooAction extends AnyAction {
//     prop2: string
// }

const foo: ActionHandler<SomeState, FooAction> = (state: SomeState, action: FooAction): SomeState => {
    return {
        ...state,
        prop2: action.prop2
    }
}

TypeScript Redux AnyAction doesn't accept extraProps

1 Answers1