Reselect 类型推断问题分析与解决方案

问题背景

在使用 Reselect 5.1.1 版本时，开发者遇到了一个类型推断问题。当直接使用 createSelector.withTypes<T>() 创建类型化选择器时，一切工作正常。但当尝试通过一个包装函数来创建类型化选择器时，类型推断失效，导致参数类型变为 unknown。

直接使用的情况

在直接使用 createSelector.withTypes<T>() 的情况下，类型推断完全正确：

type Store = {
  count: number;
};

const selectorCreator = createSelector.withTypes<Store>();

const selectCount = selectorCreator(
  [
    (store) => {
      return store; // store 类型正确推断为 Store
    },
  ],
  (store) => {
    return store.count; // store 类型正确推断为 Store
  }
);

包装函数导致的问题

当开发者尝试将选择器创建逻辑封装到一个函数中时，类型推断出现了问题：

function createTypedStoreSelector<T>(
  ...args: Parameters<ReturnType<typeof createSelector.withTypes<T>>>
) {
  return createSelector.withTypes<T>()(...args);
}

const selectorCreator = createTypedStoreSelector(
  [
    (store) => {
      return store; // store 类型正确
    },
  ],
  (store) => {
    return store; // store 类型变为 any
  }
);

问题原因分析

这个问题源于 TypeScript 的类型推断机制。当使用 Parameters<ReturnType<typeof createSelector.withTypes<T>>> 这种方式来获取参数类型时，TypeScript 无法保留完整的类型信息链，导致在包装函数内部类型信息丢失。

解决方案

经过探索，开发者找到了一个有效的解决方案，即不使用 withTypes 辅助方法，而是直接基于 createSelector 的类型签名来实现：

class ExternalStore<Store> {
  createSelector<
    InputSelectors extends readonly Selector<Store>[],
    Result,
    OverrideMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize,
    OverrideArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize
  >(
    ...args: Parameters<
      typeof createSelector<
        InputSelectors,
        Result,
        OverrideMemoizeFunction,
        OverrideArgsMemoizeFunction
      >
    >
  ): ReturnType<
    typeof createSelector<
      InputSelectors,
      Result,
      OverrideMemoizeFunction,
      OverrideArgsMemoizeFunction
    >
  > {
    const selector = createSelector(...args);
    // 可以在这里对选择器进行额外处理
    return selector;
  }
}

这种实现方式能够：

1. 保持完整的类型推断
2. 允许对选择器进行集中管理
3. 支持自定义记忆化函数
4. 便于在类中维护选择器引用

实际应用示例

const externalStore = new ExternalStore<Store>();

const countSelector = externalStore.createSelector(
  [(store) => store],
  (store) => {
    return store.count; // 类型推断正确
  }
);

总结

在 Reselect 中使用类型化选择器时，直接使用 withTypes 方法是最简单的方式。但当需要更复杂的封装时，了解 Reselect 的底层类型系统并直接基于 createSelector 的类型签名进行扩展，能够提供更好的灵活性和类型安全性。这种解决方案特别适合需要在类中集中管理选择器的场景。