React useReducer场景下如何合并属性相同但值类型不同的TypeScript接口？

你可以通过映射类型+泛型的方式统一生成Action联合类型，完全不需要单独定义多个结构重复的interface：

步骤1：定义类型映射表 #

先把所有action的type字符串和对应payload的类型整理成一个映射对象类型：

// 把type作为键，对应payload类型作为值
type ActionPayloadMap = {
  JOIN: string;
  LEAVE: string;
  MESSAGE: Message;
  ERROR: string;
  ROOM: RoomData;
};

步骤2：定义通用Action生成类型 #

type Action<T extends keyof ActionPayloadMap> = {
  type: T;
  payload: ActionPayloadMap[T];
};

步骤3：生成最终的联合Action类型 #

// 等价于你原来的 MembersAction | MessagesAction | RoomAction | ErrorAction
type AllAction = Action<keyof ActionPayloadMap>

这样改完之后，你原来的reducer函数不需要做任何修改，switch case的类型收窄能力完全和之前一致，后续如果要新增action类型，只需要在ActionPayloadMap里加一行键值对即可，不用再写重复的interface定义。

额外优化建议 #

你当前reducer里的LEAVE分支用了splice方法，这个方法会直接修改原数组，违反了React state不可变的原则，建议替换成filter避免潜在bug：

case "LEAVE":
  return {
    ...state,
    members: state.members.filter(member => member !== action.payload),
  };

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