0Pricing
TypeScript Academy · Leçon

XState : machines à états typées

Modélisez des machines à états avec TypeScript dans XState

XState : machines à états typées est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Pourquoi utiliser XState avec TypeScript ?

XState modélise le state d’une application sous forme de machines à state explicites. Avec TypeScript, les states, les événements et le contexte sont entièrement typés, ce qui empêche les transitions de state invalides à la compilation.

import { createMachine, assign } from "xstate";

Définir les types de la machine

XState v5 utilise des paramètres de type pour le contexte, les événements et les states. Définissez-les avant de créer la machine.

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

Créer une machine typée

Transmettez vos types de contexte et d’événements à createMachine pour vérifier entièrement les types des states et des transitions.

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" } },
  },
});

Contexte typé avec assign

Utilisez assign pour mettre à jour le contexte — TypeScript garantit que le contexte partiel renvoyé correspond au type défini.

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

Utiliser la machine dans React

Le hook useMachine de @xstate/react renvoie un state et une fonction d’envoi typés.

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>;
}

Conditions de garde typées

Les fonctions de garde de types reçoivent un contexte et un événement typés, ce qui garantit que les conditions sont vérifiées par rapport aux bons types.

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

Actions typées

Les actions nommées peuvent être typées en les déclarant dans la configuration de la machine, puis en les implémentant via 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({ /* ... */ });

States parallèles

XState prend en charge les régions parallèles (orthogonales). TypeScript suit les valeurs de state des states parallèles sous forme d’objets.

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

Correspondance des states

Utilisez state.matches() pour vérifier le state actuel — XState type cette vérification pour les noms de states connus.

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

Inspecteur XState

Connectez l’inspecteur XState pour déboguer visuellement les machines à state pendant le développement, sans perdre la sécurité de typage dans le code de production.

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

Récapitulatif : typage de XState

Les machines XState typées définissent les types du contexte et des événements, utilisent assign pour les mises à jour typées du contexte et s’intègrent à React via useMachine afin de gérer un state et l’envoi d’événements entièrement typés.

Vérification rapide

Que fait la propriété types dans la configuration d’une machine XState v5 ?

Ce que vous avez appris

XState avec TypeScript vous fournit des machines à state entièrement typées : définissez les types du contexte et des événements, utilisez assign pour les mises à jour typées, les conditions de garde et les actions. Le hook useMachine fournit un state et un envoi typés dans les composants React.

Questions Fréquemment Posées

La leçon « XState : machines à états typées » est-elle gratuite ?

Oui — le texte complet de « XState : machines à états typées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « XState : machines à états typées » ?

Modélisez des machines à états avec TypeScript dans XState Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « XState : machines à états typées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Typer les slices et thunks de Redux Toolkit
  2. Motifs de typage des magasins Zustand
  3. XState : machines à états typées
  4. État dérivé et sélecteurs avec des types
← Retour à TypeScript Academy