javascript - Typescript reducer 的 switch case typeguard 不适用于对象传播

Question

我有一个 reducer，它根据 action.type 执行不同的操作，某些操作的操作负载不同。

    export enum ActionType {
      UpdateEntireState = "UPDATE_ENTIRE_STATE",
      UpdateStateItem = "UPDATE_STATE_ITEM"
    }
    
    type TypeEditData = {
      id: string;
      name: string;
      surname: string;
      age: number;
    };
    
    export type State = TypeEditData[];
    export type Action = UpdateEntireState | UpdateStateItem;
    
    type UpdateEntireState = {
      type: ActionType.UpdateEntireState;
      payload: State;
    };
    
    type UpdateStateItem = {
      type: ActionType.UpdateStateItem;
      payload: { id: string; data: TypeEditData };
    };
    
    export function reducer(state: State, action: Action): State {
      const { type, payload } = action;
    
      switch (type) {
        case ActionType.UpdateEntireState: {
          return [...payload];
        }
        case ActionType.UpdateStateItem: {
          const person = state.filter((item) => item.id === payload.id);
          return [...state, person[0]];
        }
        default: {
          throw Error("Wrong type of action!");
        }
      }
    }

这段代码不会工作，错误会说我的 Action 负载可以是 State 或 { id: string;数据:TypeEditData }。但是，如果我像这样使用点表示法访问 switch case 内的 payload 属性

return [...action.payload];

不会有任何错误，类型保护会正常工作。const { type, payload } = action; 在类型方面与 action.type 和 action.payload 有何不同，以及为什么没有类型保护使用传播语法？

TS 版本 - 4.3.4

Answer 1

问题是您在 action 上有类型信息可用之前定义了 payload，因此它具有联合类型

State | {
    id: string;
    data: TypeEditData;
};

在每个 case 语句中定义一个局部变量或简单地使用 action.payload，编译器就知道它的类型:

export function reducer(state: State, action: Action): State {
  // const { type, payload } = action;

  switch (action.type) {
    case ActionType.UpdateEntireState: {
      return [...action.payload];
    }
    case ActionType.UpdateStateItem: {
      const person = state.filter((item) => item.id === action.payload.id);
      return [...state, person[0]];
    }
    default: {
      throw Error("Wrong type of action!");
    }
  }
}

变量类型在声明时显式建立(例如 const a: string)或在初始化时隐式建立(例如 a = 4)。随后的类型保护构造不用于重新评估变量的类型。相反，由于此时已经定义了变量的类型，因此该类型用于验证后面的构造是否对该变量有效。