Reselect 5.0类型增强：TypeScript 4.7+新特性应用

Reselect 5.0类型增强：TypeScript 4.7+新特性应用

【免费下载链接】reselect reduxjs/reselect: Reselect 是一个用于 Redux 的选择器库，可以用于优化 Redux 应用程序的性能，支持多种 Redux 功能和工具，如 Redux，React-Redux，Reselect 项目地址: https://gitcode.com/gh_mirrors/re/reselect

你是否还在为Redux选择器的类型推断问题烦恼？是否曾因TypeScript的"类型实例化过深"错误而被迫重构代码？Reselect 5.0带来了全面的类型系统升级，基于TypeScript 4.7+的新特性彻底解决了这些痛点。本文将详细介绍这些类型增强如何提升开发体验，以及如何在实际项目中应用这些新特性。

读完本文后，你将能够：

• 理解Reselect 5.0类型系统的核心改进
• 掌握createSelector.withTypes API的使用方法
• 解决深层嵌套选择器的类型推断问题
• 优化Redux应用中的类型安全和开发效率

TypeScript 4.7+新特性赋能

Reselect 5.0放弃了对TypeScript 4.7以下版本的支持，全面拥抱了TypeScript 4.7及以上版本的新特性。这一决定带来了显著的类型系统改进，特别是在参数合并和类型推断方面。

合并参数类型的核心实现

Reselect 5.0引入了MergeParameters类型工具，能够智能合并多个函数的参数类型。这一实现源自TypeScript团队核心成员Anders Hjelsberg在TypeScript 4.7合并参数特性讨论中的相关讨论。

// src/versionedTypes/ts47-mergeParameters.ts
export type MergeParameters<FunctionsArray extends readonly AnyFunction[]> =
  '0' extends keyof FunctionsArray
    ? MergeTuples<ExtractParameters<FunctionsArray>>
    : Parameters<FunctionsArray[number]>

MergeParameters通过以下步骤实现参数合并：

1. 使用ExtractParameters提取每个函数的参数类型元组
2. 通过LongestTuple找到最长的参数元组作为基础结构
3. 使用MergeTuples将各参数元组在对应索引位置进行类型交叉

这一机制使得Reselect能够正确推断多个输入选择器组合时的参数类型，为复杂选择器的类型安全提供了基础。

类型推断能力的飞跃

Reselect 5.0将选择器嵌套限制从约8层提升到30层左右，大幅减少了"Type instantiation is excessively deep and possibly infinite"错误的发生。这一改进源自对类型递归深度的优化和TypeScript 4.7引入的递归类型改进。

上图展示了Reselect 5.0与旧版本在处理嵌套选择器时的类型推断能力对比。新版本能够轻松处理复杂的状态选择逻辑，同时保持类型安全。

createSelector.withTypes：类型预设API

Reselect 5.0引入了createSelector.withTypes方法，允许开发者预先定义状态类型，从而避免在每个选择器中重复声明状态类型。

基础使用方法

import { createSelector } from 'reselect';

// 定义应用的根状态类型
export interface RootState {
  todos: { id: number; completed: boolean }[];
  alerts: { id: number; read: boolean }[];
}

// 创建预设状态类型的选择器创建函数
export const createAppSelector = createSelector.withTypes<RootState>();

// 无需重复声明state类型
const selectTodoIds = createAppSelector(
  [state => state.todos],
  todos => todos.map(({ id }) => id)
);

通过createSelector.withTypes<RootState>()创建的选择器函数会自动推断state参数的类型为RootState，大幅减少了重复代码。

处理不同参数传递方式

createSelector.withTypes在处理不同参数传递方式时表现出不同的类型推断能力：

// 数组形式传递输入选择器 - 类型完全推断
createAppSelector(
  [
    state => state.todos,
    state => state.alerts
  ],
  (todos, alerts) => {
    // todos: Todo[]
    // alerts: Alert[]
    return [...todos.map(t => t.id), ...alerts.map(a => a.id)];
  }
);

// 独立参数传递输入选择器 - 需要手动标注类型
createAppSelector(
  state => state.todos,
  state => state.alerts,
  (todos: Todo[], alerts: Alert[]) => { // 需手动标注类型
    return [...todos.map(t => t.id), ...alerts.map(a => a.id)];
  }
);

注意：当输入选择器作为独立参数传递时，TypeScript无法自动推断组合函数的参数类型，需要手动标注。这是当前类型系统的已知限制。

高级类型应用场景

Reselect 5.0的类型增强在以下场景中表现尤为出色：

1. 复杂状态选择逻辑

// 多级嵌套的状态选择
const selectFilteredCompletedTodoTitles = createAppSelector(
  [
    createAppSelector(
      [state => state.todos],
      todos => todos.filter(todo => todo.completed)
    ),
    state => state.filters.searchQuery
  ],
  (completedTodos, searchQuery) => {
    return completedTodos
      .filter(todo => todo.title.includes(searchQuery))
      .map(todo => todo.title);
  }
);

得益于TypeScript 4.7的递归类型改进，即使是这种多级嵌套的选择器，类型推断也能完美工作。

2. 自定义选择器创建器

Reselect 5.0允许创建自定义的选择器创建器，并保留完整的类型支持：

import { createSelectorCreator } from 'reselect';
import { lruMemoize } from 'reselect/lruMemoize';

// 创建带有LRU缓存的选择器创建器
const createLruSelector = createSelectorCreator({
  memoize: lruMemoize,
  memoizeOptions: [{ maxSize: 100 }]
});

// 为自定义选择器创建器预设状态类型
const createAppLruSelector = createLruSelector.withTypes<RootState>();

// 使用自定义选择器
const selectRecentTodos = createAppLruSelector(
  [state => state.todos],
  todos => todos.slice(-5)
);

3. 结构化选择器

createStructuredSelector也受益于类型系统的改进，现在能够提供更精确的类型推断：

import { createStructuredSelector } from 'reselect';

const selectTodoStats = createStructuredSelector({
  total: state => state.todos.length,
  completed: state => state.todos.filter(t => t.completed).length,
  pending: state => state.todos.filter(t => !t.completed).length
});

// 返回类型自动推断为：{ total: number; completed: number; pending: number }

迁移指南与最佳实践

从旧版本迁移

1. 更新TypeScript版本至4.7或更高
2. 替换已弃用的类型：
   • ParametricSelector → Selector
   • OutputParametricSelector → OutputSelector
3. 重命名的函数和选项：
   • defaultMemoize → lruMemoize
   • defaultEqualityCheck → referenceEqualityCheck

最佳实践

1. **始终使用createSelector.withTypes**预设状态类型，提高代码一致性和开发效率
2. 优先使用数组形式传递输入选择器，以获得最佳的类型推断
3. 为复杂选择器编写类型测试，确保类型行为符合预期
4. 利用TypeScript 4.9的satisfies操作符验证选择器返回类型：

const selectTodoIds = createAppSelector(
  [state => state.todos],
  todos => todos.map(todo => todo.id)
) satisfies (state: RootState) => number[];

总结与展望

Reselect 5.0基于TypeScript 4.7+的新特性，带来了全面的类型系统升级。通过引入MergeParameters类型工具和createSelector.withTypes API，Reselect显著提升了类型推断能力和开发体验。

这些改进使得开发者能够：

• 编写更复杂的选择器逻辑而不牺牲类型安全
• 减少重复的类型声明代码
• 更早地在开发过程中发现类型错误

随着TypeScript的不断发展，Reselect团队将继续探索新的类型特性，进一步提升Redux应用的类型安全和开发效率。

要开始使用这些新特性，只需执行以下命令安装最新版本：

npm install reselect@latest
# 或
yarn add reselect@latest

仓库地址：https://gitcode.com/gh_mirrors/re/reselect

建议结合官方文档website/docs/introduction/v5-summary.mdx和类型测试test/createSelector.withTypes.test.ts深入学习这些新特性。

【免费下载链接】reselect reduxjs/reselect: Reselect 是一个用于 Redux 的选择器库，可以用于优化 Redux 应用程序的性能，支持多种 Redux 功能和工具，如 Redux，React-Redux，Reselect 项目地址: https://gitcode.com/gh_mirrors/re/reselect