Using enum members for states

[bstro]

Hi there. Brand new to xstate, trying to learn by starting off with a simple Game of Life implementation.

I'd like to use enum members for my state keys, but as soon as I do so, I get the following Typescript error: Type '{ TICK: { target: Condition; cond: ({ neighbors }: { neighbors: number; }) => boolean; }; }' is not assignable to type 'undefined'. This seems like it should be possible?

Here's my cell machine:

export const cellMachine = Machine<{ neighbors: number }>({
  id: "cell",
  initial: Condition.Dead,
  context: { neighbors: 0 },
  states: {
    [Condition.Alive]: {
      on: {
        TICK: {
          target: Condition.Dead,
          cond: ({ neighbors }) => neighbors !== 2 && neighbors !== 3,
        },
      },
    },
    [Condition.Dead]: {
      on: {
        TICK: {
          target: Condition.Alive,
          cond: ({ neighbors }) => neighbors === 3,
        },
      },
    },
  },
});

Side question: does anyone know of any good examples/resources for learning to use xState with Typescript? Most of the docs and examples I've found are JS-focused, even on xstate.js.org…

[davidkpiano]

Can you put that in a CodeSandbox? Would make it easier to work with.

[bstro]

Hey @davidkpiano , I think I actually figured it out. It isn't perfect yet, but here's a codeSandbox if you're interested. I pointed that URL to line 111 in particular because it appears that the return value for the next state of the cell gets coerced to a string and loses its original enum type. But it compiles.

The state machine is in Machines.tsx

[CodingDive]

Side question: does anyone know of any good examples/resources for learning to use xState with Typescript?

I did write a few blog posts last year. Most of the examples and also the content inside the blog is focused on using XState with TypeScript https://dev.to/codingdive/state-machine-advent-the-simplest-state-machine-that-will-improve-your-code-today-1-24-5bfi