TypeScript Academy · 课时

带类型的派生状态与选择器

Q: 「带类型的派生状态与选择器」这节课中我会学到什么？

编写带类型的选择器函数来计算状态 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写带类型的选择器函数来计算状态

第 4 / 4 课13 个步骤

带类型的派生状态与选择器 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

什么是派生 State？

派生 state 是根据其他 state 计算得出的 state，例如筛选列表或求值的总和。选择器封装了这种计算，并且可以进行记忆化以提升性能。

// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);

带类型的选择器函数

请为选择器函数编写明确的返回类型，以说明其计算结果并防止类型逐渐偏离预期。

import type { RootState } from "./store";

const selectActiveUsers = (state: RootState): User[] =>
  state.users.filter((u) => u.isActive);

const selectUserCount = (state: RootState): number =>
  state.users.length;

reselect：记忆化选择器

reselect 库（RTK 使用的库）会创建记忆化选择器，只有在输入发生变化时才会重新计算。

import { createSelector } from "reselect";

const selectActiveUsers = createSelector(
  (state: RootState) => state.users,
  (users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]

带类型的参数化选择器

工厂选择器接收参数并返回一个选择器，适合按实体分别进行查询。

const selectUserById = (id: string) =>
  createSelector(
    (state: RootState) => state.users,
    (users) => users.find((u) => u.id === id) ?? null
  );

// Usage: const user = useAppSelector(selectUserById("123"));

Zustand 选择器

在 Zustand 中，请将带类型的选择器传给 store 钩子，以便只读取所需的 state 切片。

const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]

在 React 中使用 useMemo 处理派生 State

对于本地派生 state，请将 useMemo 与适当的类型注解结合使用，在组件中记忆化计算结果。

const sortedUsers = useMemo(
  (): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

组合选择器

请通过组合更简单的选择器来构建复杂选择器，reselect 会处理整个链条中的记忆化。

const selectActiveUserNames = createSelector(
  selectActiveUsers,
  (users) => users.map((u) => u.name)
); // string[]

使用 immer 为派生更新提供类型安全的 Zustand

计算派生更新时，请使用 immer 修改草稿 state——TypeScript 会确保只修改有效属性。

const useStore = create<AppStore>()(immer((set) => ({
  users: [],
  activeCount: 0,
  setUsers: (users) =>
    set((draft) => {
      draft.users = users;
      draft.activeCount = users.filter((u) => u.isActive).length;
    }),
})));

选择器返回类型推断

TypeScript 会从选择器推断返回类型，但明确的注解可以提高可读性，并防止动态表达式意外产生 any。

// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
  (s: RootState) => s.cart.items,
  (items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);

测试选择器

选择器是纯函数——请通过传入模拟 state，并断言输出类型和值来测试它们。

test("selectActiveUsers", () => {
  const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
  expect(selectActiveUsers(state)).toHaveLength(1);
});

回顾：类型化选择器

类型化选择器：编写接收 RootState 且具有明确返回类型的函数，使用 createSelector 进行记忆化，为复杂派生逻辑组合选择器，并将它们作为纯函数进行测试。

快速检查

与普通选择器函数相比，createSelector 提供了什么优势？

在交互式课程中回答

您学到了什么

类型化选择器接收 RootState，并返回类型精确的派生值。请使用 createSelector 进行记忆化，为复杂逻辑组合选择器，并编写工厂选择器来执行参数化的实体查询。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「带类型的派生状态与选择器」课时是免费的吗？

是的 — 「带类型的派生状态与选择器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「带类型的派生状态与选择器」这节课中我会学到什么？

编写带类型的选择器函数来计算状态你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「带类型的派生状态与选择器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy