TypeScript Academy · 课时

XState：带类型的状态机

Q: 「XState：带类型的状态机」这节课中我会学到什么？

在 XState 中使用 TypeScript 建模状态机 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 XState 中使用 TypeScript 建模状态机

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

为什么要将 XState 与 TypeScript 结合使用？

XState 将应用程序 state 建模为明确的状态机。结合 TypeScript 后，状态、事件和上下文都具备完整类型，从而在编译时阻止无效的状态转换。

import { createMachine, assign } from "xstate";

定义机器类型

XState v5 使用类型参数表示上下文、事件和状态。请在创建机器之前定义这些类型。

type TrafficContext = { count: number };
type TrafficEvent =
  | { type: "TURN_GREEN" }
  | { type: "TURN_YELLOW" }
  | { type: "TURN_RED" };

创建带类型的机器

请将上下文类型和事件类型传入 createMachine，以便对状态和转换进行完整的类型检查。

const trafficMachine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  id: "traffic",
  initial: "red",
  context: { count: 0 },
  states: {
    red:    { on: { TURN_GREEN: "green" } },
    green:  { on: { TURN_YELLOW: "yellow" } },
    yellow: { on: { TURN_RED: "red" } },
  },
});

使用 assign 处理带类型的上下文

请使用 assign 更新上下文——TypeScript 会确保返回的部分上下文符合已定义的类型。

const machine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  // ...
  entry: assign({ count: 0 }),
  on: {
    TURN_GREEN: {
      actions: assign(({ context }) => ({ count: context.count + 1 })),
    },
  },
});

在 React 中使用机器

来自 @xstate/react 的 useMachine 钩子会返回带类型的状态和发送函数。

import { useMachine } from "@xstate/react";

function TrafficLight() {
  const [state, send] = useMachine(trafficMachine);
  // state.value: "red" | "green" | "yellow"
  // send: (event: TrafficEvent) => void
  return <button onClick={() => send({ type: "TURN_GREEN" })}>Go</button>;
}

带类型的守卫

类型守卫函数会接收带类型的上下文和事件，确保条件针对正确的类型进行检查。

const machine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  states: {
    red: {
      on: {
        TURN_GREEN: {
          guard: ({ context }) => context.count < 10, // context: TrafficContext
          target: "green",
        },
      },
    },
  },
});

带类型的操作

您可以在机器配置中声明命名操作，并通过 setup 实现它们，从而为这些操作添加类型。

import { setup } from "xstate";
const machine = setup({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  actions: {
    logTransition: ({ context, event }) => {
      console.log(context.count, event.type);
    },
  },
}).createMachine({ /* ... */ });

并行状态

XState 支持并行（正交）区域。对于并行状态，TypeScript 会将状态值跟踪为对象。

states: {
  ui: {
    type: "parallel",
    states: {
      modal: { initial: "closed", states: { closed: {}, open: {} } },
      tooltip: { initial: "hidden", states: { hidden: {}, visible: {} } },
    },
  },
}

状态匹配

请使用 state.matches() 检查当前状态——XState 会为已知的状态名称提供类型支持。

const [state] = useMachine(trafficMachine);
if (state.matches("green")) {
  // TypeScript knows we're in the green state
}

XState 检查器

请连接 XState Inspector，以便在开发期间对状态机进行可视化调试，同时不会丢失生产代码中的类型安全性。

import { inspect } from "@xstate/inspect";
inspect({ iframe: false }); // opens state machine inspector

回顾：XState 类型定义

带类型的 XState 机器会定义上下文和事件类型，使用 assign 更新带类型的上下文，并通过 useMachine 与 React 集成，从而实现完全带类型的状态和事件分发。

快速检查

XState v5 机器配置中的 types 属性有什么作用？

您学到了什么

使用 TypeScript 的 XState 可以提供完全带类型的状态机：定义上下文和事件类型，使用 assign 执行带类型的更新，并为条件和操作添加类型。useMachine 钩子会在 React 组件中提供带类型的状态和分发功能。

常见问题解答

「XState：带类型的状态机」课时是免费的吗？

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

「XState：带类型的状态机」这节课中我会学到什么？

在 XState 中使用 TypeScript 建模状态机你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「XState：带类型的状态机」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy