来自包含函数的对象的函数生成器，函数名是键值是函数体

Question

我的代码：

import {
  createAction
} from '@reduxjs/toolkit'

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

type TFunctions<Obj> = {
  [Prop in keyof Obj]: Obj[Prop]
}
const functionGenerator = <_, T>(prefix: string, fObj: T): TFunctions<T> => {
  const returnFunctions: any = {}
  Object.keys(fObj).map(key => {
    returnFunctions[key] = createAction(`${prefix}/${key}`, fObj[key]) // error
  })
  return returnFunctions;
}

export const myFunction = functionGenerator(PREFIX, myFunctions)
myFunction.f1(123)
sagaActions.f1.type // type is string of `${prefix}/${key}`
myFunction.f2('text')
sagaActions.f2.type // type is string of `${prefix}/${key}`
myFunction.f3()

export const sagaActions = functionGenerator(ADMIN, myFunctions)

从技术上讲，这段代码可以工作，但我找不到正确的打字稿来删除这个错误。 我是打字稿的初学者

错误：

1： createAction 第二个参数 Element 隐式具有“any”类型，因为“string”类型的表达式不能用于索引“unknown”类型。

2： Array.prototype.map() 需要箭头函数的返回值。(array-callback-return)

3 : 类型 '(payload: number) => { payload: number; 上不存在属性 'type' }'。

从 1 2 我可以忽略我会尝试找到一些解决方案或在文件中设置忽略所有错误，但 3 它在其他文件上使用时很关键，我无法理解 [Prop in keyof Obj] 中的方式：Obj[ Prop] 我将类型值添加为字符串

4： ReturnType自动检测不起作用

Playground

Answer 1

我认为sagaActions 不是这个问题的一部分，因此我将忽略它们。

首先，根据我的经验，如果您想在map 循环内改变累加器对象，最好使用[].reduce。

如果你想获得createAction函数的返回类型 - 你应该参考ActionCreatorWithPreparedPayload类型

如果你想推断prefix 参数的文字类型，你应该为此创建额外的泛型。 考虑这个非常简单的例子：const foo=<Prefix>(prefix:Prefix)=>null。 如果您对函数参数的推断感兴趣，可以查看我的article。

完整代码：

import { createAction, ActionCreatorWithPreparedPayload } from '@reduxjs/toolkit'

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

type Reducer<
  Obj extends Record<string, (...args: any[]) => { payload: any }>,
  Prefix extends string
  > = {
    [Prop in keyof Obj]:
    ActionCreatorWithPreparedPayload<
      Parameters<Obj[Prop]>,
      ReturnType<Obj[Prop]>['payload'],
      `${Prefix}/${Prop & string}`
    >
  }

const functionGenerator = <
  Prefix extends string,
  T extends Record<string, (...args: any[]) => any>
>(prefix: Prefix, fObj: T) =>
  (Object.keys(fObj) as Array<keyof T>).reduce((acc, elem) => ({
    ...acc,
    [elem]: createAction(`${prefix}/${elem}`, fObj[elem])
  }), {} as Reducer<T, Prefix>)

export const myFunction = functionGenerator('#foo', myFunctions)
myFunction.f1(123).type // "#foo/f1"
myFunction.f2('text').type //"#foo/f2"
myFunction.f3().type // "#foo/f3"

Playground

Reducer - 遍历 Obj 键并从 ActionCreatorWithPreparedPayload 创建适当的值类型。这是您在 functionGenerator 中所做操作的一对一表示，因为 functionGenerator 遍历所有键并为每个键分配 createAction 返回值。

---

ActionCreatorWithPreparedPayload 泛型参数的描述：

export interface ActionCreatorWithPreparedPayload<
  Args extends unknown[],    // list of arguments
  P,                         // payload object
  T extends string = string, // prefix
  E = never,
  M = never
> extends BaseActionCreator<P, T, M, E> {
  /**
   * Calling this {@link redux#ActionCreator} with `Args` will return
   * an Action with a payload of type `P` and (depending on the `PrepareAction`
   * method used) a `meta`- and `error` property of types `M` and `E` respectively.
   */
  (...args: Args): PayloadAction<P, T, M, E>
}