TypeScript中如何为传入redux-saga的history对应action定义类型？

前置依赖类型说明 #

你需要用到两个核心类型：

• History：react-router-dom内置的history实例类型，完全匹配useHistory()的返回值
• ReturnType：TypeScript内置的工具类型，用于推导函数的返回值类型
  如果你的项目用了Redux Toolkit，也可以直接用内置的PayloadAction类型辅助定义。

步骤1：补全action.ts的类型定义 #

优先给action creator加上类型约束，后续saga的类型可以直接复用，避免重复定义：

import { History } from 'react-router-dom';
import { createAction } from '@reduxjs/toolkit';

// 直接指定createAction的payload类型为History，建议去掉多余的嵌套层
export const recievingHistoryAsPayload = createAction<History>(
  Types.RECEIVING_HISTORY_AS_PAYLOAD
);

优化提示：你之前的代码多包了一层{ payload: history }，直接传history实例作为参数更简洁，对应组件内的dispatch调用改为：

dispatch(recievingHistoryAsPayload(history));

步骤2：给saga的action参数指定类型 #

直接通过action creator的类型推导返回的action类型，不需要手动写接口，维护成本更低：

import { call } from 'redux-saga/effects';
import { recievingHistoryAsPayload } from './action';

// 用ReturnType推导action的精确类型，替换any
export function* recievingHistoryAsPayloadSaga(
  action: ReturnType<typeof recievingHistoryAsPayload>
): Generator {
  // 注意：直接传push方法会丢失this指向，建议用箭头函数包裹避免调用报错
  yield call(() => action.payload.push('/'));
}

保留原有嵌套结构的兼容方案 #

如果不想修改现有{ payload: history }的传参格式，只需要调整action creator的类型定义即可：

// action.ts中修改类型定义
export const recievingHistoryAsPayload = createAction<{ payload: History }>(
  Types.RECEIVING_HISTORY_AS_PAYLOAD
);

对应saga中取history的写法为action.payload.payload.push。

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