Javascript Redux操作类型脚本返回类型不工作

因此，基本上我正在尝试返回一组函数的类型&能够在我的redux reducer中匹配这些类型

以下是我的尝试：

行动

export const SET_CART_ITEMS = "SET_CART_ITEMS";
export const SET_CART_TOTALS = "SET_CART_TOTALS";

export const ADD_CART_ITEM = "ADD_CART_ITEM";
export const REMOVE_CART_ITEM = "REMOVE_CART_ITEM";

export const SET_CART_LOADING = "SET_CART_LOADING";

export function setCart(cart: Cart) {
  return {
    type: SET_CART_ITEMS,
    cart
  } as const;
}

export function setTotals(totals: CartTotal) {
  return {
    type: SET_CART_TOTALS,
    totals
  }
}

export function addCartItem(cart: Cart) {
  return {
    type: ADD_CART_ITEM,
    cart
  } as const;
}

export function removeCartItem(cart: Cart) {
  return {
    type: REMOVE_CART_ITEM,
    cart
  } as const;
}

export function toggleCartLoading(loading: boolean) {
  return {
    type: SET_CART_LOADING,
    loading
  } as const;
}

export type CartActions = ReturnType<typeof setCart>| ReturnType<typeof addCartItem> | ReturnType<typeof removeCartItem> | ReturnType<typeof toggleCartLoading> | ReturnType<typeof setTotals>

这根本不起作用，我得到的错误是减速器开关说：

"Property 'cart' does not exist on type 'CartActions'.
  Property 'cart' does not exist on type '{ type: string; totals: CartTotal; }'."


Property 'loading' does not exist on type '{ readonly type: "SET_CART_ITEMS"; readonly cart: Record<string, CartItem>; } | { readonly type: "ADD_CART_ITEM"; readonly cart: Record<string, CartItem>; } | { ...; } | { ...; } | { ...; }'.
  Property 'loading' does not exist on type '{ readonly type: "SET_CART_ITEMS"; readonly cart: Record<string, CartItem>; }'.ts(2339)

“CartActions”类型上不存在属性“cart”。
属性“cart”在类型“{type:string；totals:CartTotal；}”上不存在
属性“loading”不存在于类型“{readonly type:“SET_CART_ITEMS”；readonly CART:Record；}{readonly type:“ADD_CART_ITEM”；readonly CART:Record；}{{…}}{…}上。
属性“loading”在类型“{readonly type:“SET\u CART\u ITEMS”；readonly CART:Record；}”上不存在。ts（2339）

我错过了什么明显的东西吗？我真的希望不需要手动输入接口的所有操作

---

灵感来源于您实施行动的方式，您应该始终为每个行动指定类型

例如，您应该更改：

case REMOVE_CART_ITEM:
  return {
    ...state,
    cart: {
      ...action.cart
    }
  }

为此：

case REMOVE_CART_ITEM:
  return {
    ...state,
    cart: {
      ...action.cart
    }
  } as ReturnType<typeof removeCartItem>

---

每个action creator返回类型都必须用

注释为const

，这样TS就可以在reducer的switch语句中区分您的操作

在

setTotals

中，似乎缺少此const断言-至少提供的代码在添加后在中再次工作

您可以创建一个通用操作创建者，使其更具可伸缩性，并将

作为常量省略：

function createAction<T extends string, U, K extends string>(type: T, key: K, payload: U) {
  return ({
    type,
    [key]: payload
  }) as { type: T; } & { [P in K]: U }
  // need to cast, so TS doesn't return a widened index signature type
}

export function setTotals(totals: CartTotal) {
  return createAction(SET_CART_TOTALS, "totals", totals)
}
// same with the other functions

函数createAction（类型：T，键：K，有效载荷：U）{
返回({
类型，
[键]：有效载荷
})as{type:T；}&{[P in K]：U}
//需要强制转换，因此TS不会返回加宽的索引签名类型
}
导出函数集合总计（总计：CartTotal）{
返回createAction（设置购物车总计，“总计”，总计）
}
//与其他函数相同

谢谢你的回答，所以我想这个要点已经过时了，我的灵感来源是什么？不幸的是，你的两个例子都不起作用。获得相似错误
const enum ActionTypes {
  SET_CART_ITEMS,
  SET_CART_TOTALS,
  ADD_CART_ITEM,
  REMOVE_CART_ITEM,
  SET_CART_LOADING
}



type CartActions =
  | {
      type:
        | ActionTypes.SET_CART_ITEMS
        | ActionTypes.ADD_CART_ITEM
        | ActionTypes.REMOVE_CART_ITEM;
      cart: Cart;
    }
  | {
      type: ActionTypes.SET_CART_TOTALS;
      totals: CartTotal;
    }
  | {
      type: ActionTypes.SET_CART_LOADING;
      loading: boolean;
    };

export function setCart(cart: Cart): CartActions {
  return {
    type: ActionTypes.SET_CART_ITEMS,
    cart
  };
}

export function setTotals(totals: CartTotal): CartActions {
  return {
    type: ActionTypes.SET_CART_TOTALS,
    totals
  };
}

export function addCartItem(cart: Cart): CartActions {
  return {
    type: ActionTypes.ADD_CART_ITEM,
    cart
  };
}

export function removeCartItem(cart: Cart): CartActions {
  return {
    type: ActionTypes.REMOVE_CART_ITEM,
    cart
  };
}

export function toggleCartLoading(loading: boolean): CartActions {
  return {
    type: ActionTypes.SET_CART_LOADING,
    loading
  };
}

function createAction<T extends string, U, K extends string>(type: T, key: K, payload: U) {
  return ({
    type,
    [key]: payload
  }) as { type: T; } & { [P in K]: U }
  // need to cast, so TS doesn't return a widened index signature type
}

export function setTotals(totals: CartTotal) {
  return createAction(SET_CART_TOTALS, "totals", totals)
}
// same with the other functions