typescript - Typescript：如何对将函数映射转换为具有不同类型参数的类似函数的函数进行强类型化？

Question

我正在尝试强类型化一个globalizeSelectors函数，该函数将转换 redux 选择器函数的映射，以便它们将GlobalState根据 StateSlice 的键接受类型而不是 StateSlice 类型（其中 StateSlice 表示它是 GlobalState 之一的值对象的属性）。

棘手的部分是选择器的返回类型都可能不同，我不太清楚如何键入这种变化（或者是否可能）。根据 typescript 文档，我猜这可能涉及对infer运算符的一些巧妙使用，但我的 typescript-fu 还没有达到那个水平。

这是我到目前为止所得到的：（顺便说一句，对于你的冗余类型，不要介意这些选择器不处理道具或附加参数的事实——我已经删除了它以简化一点）

import { mapValues } from 'lodash'

// my (fake) redux state types
type SliceAState = { name: string }
type SliceBState = { isWhatever: boolean }

type GlobalState = {
  a: SliceAState;
  b: SliceBState;
}

type StateKey = keyof GlobalState

type Selector<TState, TResult> = (state: TState) => TResult

type StateSlice<TKey extends StateKey> = GlobalState[TKey]

type GlobalizedSelector<TResult> = Selector<GlobalState, TResult>

const globalizeSelector = <TKey extends StateKey, Result>(
  sliceKey: TKey,
  sliceSelector: Selector<StateSlice<TKey>, Result>
): GlobalizedSelector<Result> => state => sliceSelector(state[sliceKey])

// an example of a map of selectors as they might be exported from their source file
const sliceASelectors = {
  getName: (state: SliceAState): string => state.name,
  getNameLength: (state: SliceAState): number => state.name.length
}

// fake global state
const globalState: GlobalState = {
  a: { name: 'My Name' },
  b: { isWhatever: true }
}

// so this works...
const globalizedGetName = globalizeSelector('a', sliceASelectors.getName)
const globalizedNameResult: string = globalizedGetName(globalState)

const globalizedGetNameLength = globalizeSelector(
  'a',
  sliceASelectors.getNameLength
)
const globalizedNameLengthResult: number = globalizedGetNameLength(globalState)

/* but when I try to transform the map to globalize all its selectors, 
   I get type errors (although the implementation works as untyped
   javascript):
*/
type SliceSelector<TKey extends StateKey, T> = T extends Selector<
  StateSlice<TKey>,
  infer R
>
  ? Selector<StateSlice<TKey>, R>
  : never

const globalizeSelectors = <TKey extends StateKey, T>(
  sliceKey: TKey,
  sliceSelectors: {
    [key: string]: SliceSelector<TKey, T>;
  }
) => mapValues(sliceSelectors, s => globalizeSelector(sliceKey, s))

const globalized = globalizeSelectors('a', sliceASelectors)
/*_________________________________________^ TS Error:
Argument of type '{ getName: (state: SliceAState) => string; getNameLength: (state: SliceAState) => number; }' is not assignable to parameter of type '{ [key: string]: never; }'.
  Property 'getName' is incompatible with index signature.
    Type '(state: SliceAState) => string' is not assignable to type 'never'. [2345]
*/
const globalizedGetName2: string = globalized.getName(globalState)

标签： typescriptredux

Answer 1

在globalizeSelectors类型sliceSelectors是{[key: string]: SliceSelector<TKey, T> }。但T在这种情况下应该是谁？在您的简单版本T中，将是该特定切片选择器的返回类型，但是当您映射多个T时，不能是所有返回类型。

我将使用的解决方案是使用所有成员必须是 typeT的限制来代表整个类型。那里只是表示我们不关心切片选择器的返回类型是什么。sliceSelectorsSliceSelector<TKey, any>any

即使我们不关心每个切片选择器的返回类型是什么，T也会准确地捕获类型（即对象中每个函数的返回类型不会是any实际类型）。然后我们可以使用T创建一个映射类型，将对象中的每个函数都全球化。

import { mapValues } from 'lodash'

// my (fake) redux state types
type SliceAState = { name: string }
type SliceBState = { isWhatever: boolean }

type GlobalState = {
  a: SliceAState;
  b: SliceBState;
}

type StateKey = keyof GlobalState


type GlobalizedSelector<TResult> = Selector<GlobalState, TResult>

const globalizeSelector = <TKey extends StateKey, Result>(
  sliceKey: TKey,
  sliceSelector: Selector<StateSlice<TKey>, Result>
): GlobalizedSelector<Result> => state => sliceSelector(state[sliceKey])

// an example of a map of selectors as they might be exported from their source file
const sliceASelectors = {
  getName: (state: SliceAState): string => state.name,
  getNameLength: (state: SliceAState): number => state.name.length
}

// fake global state
const globalState: GlobalState = {
  a: { name: 'My Name' },
  b: { isWhatever: true }
}

type Selector<TState, TResult> = (state: TState) => TResult

type StateSlice<TKey extends StateKey> = GlobalState[TKey]

// Simplified selctor, not sure what the conditional type here was trying to achive
type SliceSelector<TKey extends StateKey, TResult> = Selector<StateSlice<TKey>, TResult>

const globalizeSelectors = <TKey extends StateKey, T extends {
    [P in keyof T]: SliceSelector<TKey, any>
  }>(
  sliceKey: TKey,
  sliceSelectors: T
) : { [P in keyof T]: GlobalizedSelector<ReturnType<T[P]>> } => mapValues(sliceSelectors, s => globalizeSelector(sliceKey, s as any)) as any // Not sure about mapValues 

const globalized = globalizeSelectors('a', sliceASelectors)

const globalizedGetName2: string = globalized.getName(globalState)

唯一的小问题是mapValues需要一些类型断言才能工作，我不认为mapValues有能力处理这些类型。