如何正确键入重新映射的对象（useSelectors）答案

【问题标题】：How to properly type remapped object (useSelectors)如何正确键入重新映射的对象（useSelectors）
【发布时间】：2023-03-23 03:02:01
【问题描述】：

你好我正在尝试创建useSelectors钩子，它应该与useSelector基本相同，但它应该接收和对象并返回一个对象。到目前为止，我已经正确输入了所有键，但没有正确传递值。

这是我的代码：

// useSelector.ts
const useSelectors = < U extends {} > (
  selectors: {
    [K in keyof U]: (state: Redux) => TypedUseSelectorHook < Redux > | null
  },
): { [K in keyof U]: TypedUseSelectorHook<Redux> | null } => {
  return reduce(
    selectors,
    (acc, selector, key) => {
      return { ...acc,
        [key]: useSelector(selector)
      };
    }, {},
  );
};

// Component.tsx
const Component = () => {
  const {
    loading,
    hierarchy,
    error
  } = useSelectors({
    loading: selectHierarchyLoading,
    hierarchy: selectHierarchyData,
    error: selectHierarchyError,
  })

  return ...;
}

IDE 知道类型如何，因为它告诉我我不能将这些类型分配给TypedUseSelectorHook，但我不知道如何传递它们，知道吗？ :)

【问题讨论】：

标签： reactjs typescript react-redux react-hooks typescript-typings

【解决方案1】：

经过一些尝试，我让它工作了，如果有人对接收选择器对象并返回值对象的钩子感兴趣。

const useSelectors = < SelectorMap extends {} > (
  selectors: {
    [Selector in keyof SelectorMap]: (state: Redux) => SelectorMap[Selector]
  },
): {
  [Selector in keyof SelectorMap]: SelectorMap[Selector]
} => {
  return reduce(
    selectors,
    (acc, selector, key) => {
      return { ...acc,
        [key]: useSelector(selector)
      };
    }, {}
    as {
      [Selector in keyof SelectorMap]: SelectorMap[Selector]
    },
  );
};

【讨论】：