TypeScript编写reducer.ts报name不存在于类型never错误如何解决

报错原因 #

你没有给state显式定义类型，TypeScript默认会把initialState里的空数组items、cart推断为never[]类型，never类型不存在任何属性，所以访问item.name时就会抛出2339错误。

解决方法 #

1. 定义类型接口 #

先定义购物车条目的基础类型，再定义整个state的结构接口：

// 按需补充字段即可，和你实际业务里的商品字段保持一致
interface CartItem {
  name: string;
  // 其他字段示例：id: number; price: number; count: number;
}

// State结构和你的initialState完全对应
interface State {
  items: CartItem[];
  cart: CartItem[];
}

2. 给initialState标注类型 #

给你定义的initialState加上显式的State类型标注：

import { ActionsUnion, ActionTypes } from './actions';

// 把上面定义的两个接口放在这里，或者单独抽离到type.ts文件引入
interface CartItem {
  name: string;
}
interface State {
  items: CartItem[];
  cart: CartItem[];
}

export const initialState: State = {
  items: [],
  cart: []
};

3. 给reducer函数补充类型标注 #

确保你的reducer函数的第一个参数state标注为State类型：

// reducer函数定义示例
export function reducer(state: State = initialState, action: ActionsUnion) {
  switch (action.type) {
    // 你的其他case逻辑
    case ActionTypes.Remove:
      // 这里可以直接用filter的返回值，不需要额外展开数组，filter本身就会返回新数组
      return {
        ...state,
        cart: state.cart.filter(item => item.name !== action.payload.name)
      };
    default:
      return state;
  }
}

可选优化：补全Action的payload类型 #

如果你的ActionsUnion还没有定义Remove动作的payload类型，可以在actions.ts里补充定义，避免访问action.payload.name时也出现类型报错：

// actions.ts示例代码
export enum ActionTypes {
  Remove = '[Cart] Remove Item'
  // 其他动作类型
}

// 定义删除动作的创建函数，显式指定payload为CartItem类型
export const removeCartItem = (item: CartItem) => ({
  type: ActionTypes.Remove,
  payload: item
})

// 把所有动作创建函数的返回类型合并成ActionsUnion
export type ActionsUnion = ReturnType<typeof removeCartItem>
// 如果有其他动作，就用 | 拼接：ReturnType<typeof addCartItem> | ReturnType<typeof clearCart>

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