PricingLoginStart free
TypeScript Academy · Oppitunti

XState: tyypitetyt tilakoneet

Mallintakaa tilakoneita TypeScriptillä XStatessa

Oppitunti 3/413 vaihetta

XState: tyypitetyt tilakoneet on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi XState ja TypeScript

XState mallintaa sovelluksen tilan eksplisiittisinä tilakoneina. TypeScriptin avulla tilat, tapahtumat ja konteksti ovat täysin tyypitettyjä, mikä estää virheelliset tilasiirtymät käännösaikana.

import { createMachine, assign } from "xstate";

Koneen tyyppien määrittäminen

XState v5 käyttää tyyppiparametreja kontekstille, tapahtumille ja tiloille. Määritelkää ne ennen koneen luomista.

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

Tyypitetyn koneen luominen

Välittäkää konteksti- ja tapahtumatyypit createMachine-funktiolle, jotta tilojen ja siirtymien tyyppitarkistus toimii kattavasti.

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

Tyypitetty konteksti assign-funktiolla

Käyttäkää assign-funktiota kontekstin päivittämiseen — TypeScript varmistaa, että palautettu osittainen konteksti vastaa määriteltyä tyyppiä.

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

Koneen käyttäminen Reactissa

@xstate/react-paketin useMachine-hook palauttaa tyypitetyn tilan ja send-funktion.

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

Tyypitetyt guardit

Guard-funktiot saavat tyypitetyn kontekstin ja tapahtuman, joten ehdot tarkistetaan oikeita tyyppejä vasten.

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

Tyypitetyt toiminnot

Nimetyt toiminnot voidaan tyypittää ilmoittamalla ne koneen asetuksissa ja toteuttamalla ne setup-funktion avulla.

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

Rinnakkaiset tilat

XState tukee rinnakkaisia eli ortogonaalisia alueita. TypeScript seuraa rinnakkaisten tilojen arvoja olioina.

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

Tilojen vertailu

Käyttäkää state.matches()-funktiota nykyisen tilan tarkistamiseen — XState tyypittää sen tunnettujen tilannimien perusteella.

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

XState Inspector

Yhdistäkää XState Inspector visuaalista tilakoneiden vianmääritystä varten kehityksen aikana menettämättä tyyppiturvallisuutta tuotantokoodissa.

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

Kertaus: XState-tyypitys

XStaten tyypitetyt koneet määrittelevät konteksti- ja tapahtumatyypit, käyttävät assign-funktiota tyypitettyihin kontekstipäivityksiin ja integroituvat Reactiin useMachine-hookin avulla, jolloin tila ja tapahtumien lähetys ovat täysin tyypitettyjä.

Pikatarkistus

Mitä XState v5:n koneasetusten types-ominaisuus tekee?

Vastaa interaktiivisessa oppitunnissa

Mitä opitte

XState ja TypeScript tarjoavat täysin tyypitetyt tilakoneet: määritelkää konteksti- ja tapahtumatyypit, käyttäkää assign-funktiota tyypitettyihin päivityksiin ja tyypittäkää vartiointiehdot sekä toiminnot. useMachine-hook tarjoaa React-komponenteissa tyypitetyn tilan ja tapahtumien lähetyksen.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
101
Oppitunnit
352
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”XState: tyypitetyt tilakoneet” ilmainen?

Kyllä – oppitunnin ”XState: tyypitetyt tilakoneet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”XState: tyypitetyt tilakoneet”?

Mallintakaa tilakoneita TypeScriptillä XStatessa Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”XState: tyypitetyt tilakoneet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Redux Toolkit -slicejen ja thunkien tyypittäminen
  2. Zustand-storen tyypitysmallit
  3. XState: tyypitetyt tilakoneet
  4. Johdettu tila ja selectorit tyyppien kanssa
← Takaisin: TypeScript Academy