XState: macchine a stati tipizzate
Modelli macchine a stati con TypeScript in XState.
XState: macchine a stati tipizzate è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.
Perché utilizzare XState con TypeScript
XState modella lo stato dell'applicazione come macchine a stati esplicite. Con TypeScript, stati, eventi e contesto sono completamente tipizzati, impedendo transizioni di stato non valide in fase di compilazione.
import { createMachine, assign } from "xstate";Definire i tipi della macchina
XState v5 utilizza parametri di tipo per contesto, eventi e stati. Li definisca prima di creare la macchina.
type TrafficContext = { count: number };
type TrafficEvent =
| { type: "TURN_GREEN" }
| { type: "TURN_YELLOW" }
| { type: "TURN_RED" };Creare una macchina tipizzata
Passi i tipi del contesto e degli eventi a createMachine per verificare completamente i tipi degli stati e delle transizioni.
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" } },
},
});Contesto tipizzato con assign
Utilizzi assign per aggiornare il contesto: TypeScript garantisce che il contesto parziale restituito corrisponda al tipo definito.
const machine = createMachine({
types: {} as { context: TrafficContext; events: TrafficEvent },
// ...
entry: assign({ count: 0 }),
on: {
TURN_GREEN: {
actions: assign(({ context }) => ({ count: context.count + 1 })),
},
},
});Utilizzare la macchina in React
L'hook useMachine di @xstate/react restituisce uno stato tipizzato e una funzione send.
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>;
}Guardie tipizzate
Le funzioni di guardia ricevono un contesto e un evento tipizzati, garantendo che le condizioni vengano verificate rispetto ai tipi corretti.
const machine = createMachine({
types: {} as { context: TrafficContext; events: TrafficEvent },
states: {
red: {
on: {
TURN_GREEN: {
guard: ({ context }) => context.count < 10, // context: TrafficContext
target: "green",
},
},
},
},
});Action tipizzate
Le action denominate possono essere tipizzate dichiarandole nella configurazione della macchina e implementandole tramite 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({ /* ... */ });Stati paralleli
XState supporta regioni parallele (ortogonali). TypeScript tiene traccia dei valori di stato per gli stati paralleli come oggetti.
states: {
ui: {
type: "parallel",
states: {
modal: { initial: "closed", states: { closed: {}, open: {} } },
tooltip: { initial: "hidden", states: { hidden: {}, visible: {} } },
},
},
}Verifica dello stato
Utilizzi state.matches() per verificare lo stato corrente: XState tipizza questo controllo per i nomi degli stati conosciuti.
const [state] = useMachine(trafficMachine);
if (state.matches("green")) {
// TypeScript knows we're in the green state
}XState Inspector
Colleghi XState Inspector per eseguire il debug visivo delle macchine a stati durante lo sviluppo, senza perdere la sicurezza dei tipi nel codice di produzione.
import { inspect } from "@xstate/inspect";
inspect({ iframe: false }); // opens state machine inspectorRiepilogo: tipizzazione di XState
Le macchine XState tipizzate definiscono i tipi del contesto e degli eventi, utilizzano assign per aggiornamenti tipizzati del contesto e si integrano con React tramite useMachine per uno stato e un dispatch degli eventi completamente tipizzati.
Verifica rapida
Che cosa fa la proprietà types nella configurazione di una macchina XState v5?
Cosa ha imparato
XState con TypeScript offre macchine a stati completamente tipizzate: definisca i tipi del contesto e degli eventi, utilizzi assign per aggiornamenti tipizzati, condizioni di guardia e action. L'hook useMachine fornisce stato e dispatch tipizzati nei componenti React.
Domande Frequenti
La lezione «XState: macchine a stati tipizzate» è gratuita?
Sì — il testo completo di «XState: macchine a stati tipizzate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.
Cosa imparerò in «XState: macchine a stati tipizzate»?
Modelli macchine a stati con TypeScript in XState. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «XState: macchine a stati tipizzate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipizzazione di slice e thunk di Redux Toolkit
- Pattern per la tipizzazione degli store Zustand
- XState: macchine a stati tipizzate
- Stato derivato e selector con i tipi