React中结合Enum与不同Payload类型的useReducer类型定义

算力阿峰

2026-7-19

解决方案

当然有办法不用逐个写，借助TypeScript的Exclude工具类型和映射类型就能实现：

完整实现代码

enum DatePickerActionType {
    PICK_YEAR = 'PICK_YEAR',
    PICK_MONTH = 'PICK_MONTH',
    PICK_DATE = 'PICK_DATE',
    PICK_HOURS = 'PICK_HOURS',
    PICK_MINUTES = 'PICK_MINUTES',
}

// 先定义排除PICK_DATE后的枚举成员类型
type NonDateActionTypes = Exclude<DatePickerActionType, DatePickerActionType.PICK_DATE>;

// 构建最终的Action联合类型
type DatePickerAction =
  | { type: DatePickerActionType.PICK_DATE; payload: Date }
  | { [K in NonDateActionTypes]: { type: K; payload: number } }[NonDateActionTypes];

// 测试Reducer的类型推断
const datePickerReducer = (state: DatePickerValue, action: DatePickerAction): DatePickerValue => {
    switch (action.type) {
        case DatePickerActionType.PICK_DATE: {
            const a = action.payload; // 现在正确推断为Date类型
            return state;
        }
        case DatePickerActionType.PICK_YEAR: {
            const b = action.payload; // 正确推断为number类型
            return state;
        }
        // 其他case的payload都会自动推断为number
        default:
            return state;
    }
};

核心逻辑说明

Exclude工具类型：Exclude<DatePickerActionType, DatePickerActionType.PICK_DATE>会把枚举里的PICK_DATE剔除，得到剩下的PICK_YEAR/PICK_MONTH/PICK_HOURS/PICK_MINUTES的联合类型。
映射类型生成统一Action：{ [K in NonDateActionTypes]: { type: K; payload: number } }会遍历所有非PICK_DATE的枚举成员，为每个成员生成对应的Action类型（type是当前枚举值，payload固定为number）。
转成联合类型：最后通过[NonDateActionTypes]索引访问，把映射出来的对象类型转换成联合类型，再和PICK_DATE的特殊Action合并，就得到了完整的Action类型。