TypeScript封装Redux Toolkit createAction函数生成器报错如何解决

完整可运行代码 #

import { createAction } from '@reduxjs/toolkit'
import type { ActionCreatorWithPayload, ActionCreatorWithoutPayload } from '@reduxjs/toolkit'

// 提前定义前缀常量
const PREFIX = 'your-prefix'
const ADMIN = 'admin'

const myFunctions = {
  f1: (payload: number) => ({
    payload,
  }),
  f2: (payload: string) => ({
    payload,
  }),
  f3: () => ({}),
}

// 类型工具：将原prepare函数转换为对应的ActionCreator类型
type ActionCreatorFromPrepare<F extends (...args: any[]) => any> = 
  F extends () => any 
    ? ActionCreatorWithoutPayload<string>
    : F extends (payload: infer P) => any
      ? ActionCreatorWithPayload<P, string>
      : never;

// 生成的函数集合类型
type TFunctions<Obj extends Record<string, (...args: any[]) => any>> = {
  [Prop in keyof Obj]: ActionCreatorFromPrepare<Obj[Prop]>
}

const functionGenerator = <T extends Record<string, (...args: any[]) => any>>(prefix: string, fObj: T): TFunctions<T> => {
  const returnFunctions: Partial<TFunctions<T>> = {}
  // 用forEach代替map，避免无返回值警告
  Object.keys(fObj).forEach(key => {
    returnFunctions[key as keyof T] = createAction(`${prefix}/${key}`, fObj[key])
  })
  return returnFunctions as TFunctions<T>;
}

export const myFunction = functionGenerator(PREFIX, myFunctions)
myFunction.f1(123)
myFunction.f1.type // 可正确识别为string类型
myFunction.f2('text')
myFunction.f2.type // 可正确识别为string类型
myFunction.f3()

export const sagaActions = functionGenerator(ADMIN, myFunctions)
sagaActions.f1.type // 可正确识别为string类型

// ReturnType可正常推断
type F1ReturnType = ReturnType<typeof myFunction.f1>
// 等同于 { type: string; payload: number }

报错逐一解决说明 #

• 报错1（createAction参数类型错误）：给泛型T增加约束T extends Record<string, (...args: any[]) => any>，明确输入的fObj是键值均为函数的对象，用字符串key索引时不会被识别为unknown类型。
• 报错2（map无返回值警告）：遍历做赋值操作属于副作用场景，不需要返回新数组，将Array.prototype.map替换为Array.prototype.forEach即可符合ESLint规则。
• 报错3（函数无type属性）：通过自定义的ActionCreatorFromPrepare工具类型，将原函数映射为Redux Toolkit内置的ActionCreator类型，该原生类型已包含type属性定义，无需额外手动声明。
• 报错4（ReturnType无法推断）：ActionCreator的返回值为标准Redux Action结构，TS可直接识别推导，类型定义正确后ReturnType可自动获取对应返回值类型。

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