javascript - TypeScript och Redux: Varför behöver jag lägga till ` | undefined` i min Reducer state-typ?

Varför kan jag inte bara skriva min reducer på detta sätt, utan att lägga till " | undefined" till min Redux state-typ?

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

Extra sammanhang::::

Det här fungerar okej:

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

Men det gör det inte när man tar bort state-parametern "undefined" från funktionen:

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

Vilket ger ett fel av:

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)

Eller detta:

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

vilket ger ett felmeddelande på:

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)

Och slutligen fungerar inte detta heller:

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

Med ett felmeddelande på:

Typen '(state: ReduxState, action: any) => ReduxState' går inte att tilldela typen 'Reducer<ReduxState, AnyAction>'. Typerna för parametrarna 'state' och 'state' är inkompatibla. Typen 'ReduxState | undefined' går inte att tilldela typen 'ReduxState'. Typen 'undefined' kan inte tilldelas typen 'ReduxState'.ts(2322)

TL; DR: Typescript är inte nöjd med min Reducer om jag inte specifikt tillåter typen "ReduxState | undefined" både i Reducer<ReduxState|undefined> och function(state: ReduxState | undefined).

Svar #1

Eftersom för det initiala tillståndet är det tidigare tillståndet odefinierat. Därför måste din funktion kunna hantera att state är undefined, det är vad det första felet berättar för dig.

Den andra versionen fungerar inte, eftersom du return state, och det kan vara odefinierat (eftersom du inte kontrollerar om det är definierat), och därför måste returtypen för den funktionen (som är det generiska argumentet till Reducer) också kunna vara odefinierad. Du kan skydda mot det:

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

då skulle Reducer<ReduxState> beskriva typen korrekt.

Svar #2

kanske borde du ge ditt tillstånd ett standardvärde, som

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

const defaultState = {
    // your default state
}

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

Relaterade artiklar