TypeScript Redux AnyAction не принимает extraProps

Question

У меня есть следующий код:

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

И когда я компилирую, я получаю следующую ошибку:

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)

Любая идея, почему я получаю эту ошибку, если AnyAction позволяет добавлять динамические c ключи?

Answer 1

Heyo.

Это потому, что ваш тип выше сузит параметр action до подмножества - но в функциях вы можете создавать только функции того же типа, которые принимают надмножество параметров. Если вы хотите больше, прочтите ковариацию и контравариантность, например эту статью или эту часть журнала изменений TS

Что касается вашей проблемы: вы можете просто написать свой ActionHandler напечатайте немного по-другому, чтобы сделать ограничение, которое вы действительно хотите (см. Второй параметр generi c):

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