Angular 14中NgRx Store无法正确识别payload的TypeScript类型问题

问题根源 #

你的代码中，AddIngredient类的type属性被显式声明为string类型，导致TypeScript无法通过action.type的字符串常量缩小联合类型范围。尽管用switch case区分了不同action类型，但TypeScript仍无法确定UPDATE_INGREDIENT分支下的action具体是UpdateIngredient类型，因此payload的类型还是多类型联合，无法直接访问index属性。

解决方案 #

1. 统一Action类的type属性类型 #

移除AddIngredient类中type属性的: string声明，让TypeScript自动推断其类型为字面量字符串（而非宽泛的string类型）。这样每个Action类的type都会是唯一的字面量类型，TypeScript就能通过switch case的action.type准确识别对应Action类型，自动缩小payload的类型范围。

修改后的shopping-list.actions.ts关键代码：

export class AddIngredient implements Action {
  // 移除: string，让type的类型为字面量'ADD_INGREDIENT'
  readonly type = ADD_INGREDIENT;

  constructor(public payload: Ingredient) {
  }
}

2. 修正Reducer中的UPDATE分支 #

完成第一步后，TypeScript会自动识别UPDATE_INGREDIENT分支下的action为UpdateIngredient类型，此时payload的类型会被正确推断为包含index和ingredient的对象，无需额外类型断言即可直接访问action.payload.index。

修正后的shopping-list.reducer.ts的UPDATE_INGREDIENT分支示例：

case ShoppingListActions.UPDATE_INGREDIENT:
  // TypeScript已自动识别action为UpdateIngredient类型，payload可直接访问index
  const targetIngredient = state.ingredients[action.payload.index];
  const updatedIngredient = {
    ...targetIngredient,
    ...action.payload.ingredient
  };
  const updatedIngredients = [...state.ingredients];
  updatedIngredients[action.payload.index] = updatedIngredient;
  return {
    ...state,
    ingredients: updatedIngredients
  };

额外优化建议 #

• 所有Action类的type属性都保持一致写法（不声明宽泛的string类型），确保TypeScript的类型推断始终有效。
• 在ADD_INGREDIENTS分支中，可移除手动类型断言<Ingredient[]>action.payload，TypeScript会自动识别该分支的action为AddIngredients类型，payload本身就是Ingredient[]。

内容的提问来源于stack exchange，提问作者GettingStarted