TypeScript 和 Redux：为什么我需要添加` | undefined` 到我的 Reducer 状态类型？

Question

为什么我不能像这样简单地输入我的减速器，而不在我的 redux 状态类型中添加“| undefined”？

const reducer: Reducer<ReduxState> = function(state: ReduxState, action: any) ...

额外的上下文::::

这工作正常：

export const reducer: Reducer<ReduxState | undefined> = function (
    state: ReduxState | undefined, 
    action: any
) {
    return state
}
export default reducer

但是，从 fxn 中删除状态参数“未定义”时不会：

export const reducer: Reducer<ReduxState | undefined> = function (
    state: ReduxState, 
    action: any
) {
    return state
}
export default reducer

这给出了一个错误：

Type '(state: ReduxState, action: any) => ReduxState' is not assignable to type 'Reducer<ReduxState | undefined, AnyAction>'.
  Types of parameters 'state' and 'state' are incompatible.
    Type 'ReduxState | undefined' is not assignable to type 'ReduxState'.
      Type 'undefined' is not assignable to type 'ReduxState'.ts(2322)

或这个：

export const reducer: Reducer<ReduxState> = function (
    state: ReduxState | undefined, 
    action: any
) {
    return state
}
export default reducer

这给出了一个错误消息：

Type '(state: ReduxState | undefined, action: any) => ReduxState | undefined' is not assignable to type 'Reducer<ReduxState, AnyAction>'.
  Type 'ReduxState | undefined' is not assignable to type 'ReduxState'.
    Type 'undefined' is not assignable to type 'ReduxState'.ts(2322)

最后，这也不起作用：

import {ReduxState, ReduxAction, ReduxActionType} from './types'
import {Reducer} from 'redux'

export const reducer: Reducer<ReduxState> = function (
    state: ReduxState, 
    action: any
) {
    return state
}
export default reducer

错误消息为：

Type '(state: ReduxState, action: any) => ReduxState' is not assignable to type 'Reducer<ReduxState, AnyAction>'. Types of parameters 'state' and 'state' are incompatible. Type 'ReduxState | undefined' is not assignable to type 'ReduxState'. Type 'undefined' is not assignable to type 'ReduxState'.ts(2322)

TL; DR：打字稿是不满意我减速，除非我特别允许“ReduxState |未定义”类型中均Reducer<ReduxState|undefined>和function(state: ReduxState | undefined)。

Answer 1

因为对于初始状态，之前的状态是未定义的。因此你的函数必须能够处理statebeing undefined，这就是第一个错误告诉你的。

第二个版本不起作用，因为您return state, 并且可以未定义（因为您不检查它是否未定义），因此该函数的返回类型（它是 的通用参数Reducer）也必须是可能未定义。你可以预防：

  if(state === undefined)
     return { /*...*/ };
  else return state;

然后Reducer<ReduxState>将正确描述类型。