Typing a promise service

[sudden solstice]

Hi guys,

I'm trying to type the response from the promise service using the guide from the docs https://xstate.js.org/docs/guides/typescript.html#typegen but it's not quite working for me.

const machine = createMachine({
  id: 'myMachine',
  initial: 'decision',
  schema: {
    services: {} as {
      makeDecision: {
        data: { id: string }
      }
    },
  },
  states: {
    decision: {
      invoke: {
        src: 'makeDecision',
        onDone: [
          {
            target: 'selectAmount',
            cond: (context, event) => { // <== event.data has type any
              return true
            },
          },
          {
            target: 'notEligible',
          },
        ],
        onError: {
          target: 'error',
        },
      },
    },
    selectAmount: {},
    notEligible: {},
    error: {},
  },
})

I have a guard, as you can see above and the event.data has type any no matter what.

The service implementation is in the useMachine

const [state, send] = useMachine(machine, {
    services: {
      async makeDecision() {
        // ...
      },
    },
  })

What do I do wrong?

[flint prawn]

Could it be that you're missing step three, adding tsTypes:{} to your config?

[sudden solstice]

Oh I didn't notice this is a Typegen parapgraph. I don't use typegen and I wonder it's possible to type services not using the typgen?

[flint prawn]

I overlooked that you're defining the cond inline 🙈 I think you need to move that to the options object - the second parameter to createMachine to get the types working when using typegen. Can you try that? Or is typegen not an option for you? I don't think you can get the type-safety here without it.

[sudden solstice]

I can't figure out how we can integrate the typegen in our dev flow yet. I personally use Webstorm and have to use cli to make the typegen work. Manual typing worked pretty well in most of the cases before.

Thank you for the help, I'll give the typegen a try.

[flint prawn]

I personally also use WebStorm a lot, with typegen. Here's a simplified example of how a package.json could look for a Nextjs project with typegen enabled. This example is using pnpm but replace that with your favorite package manager. And remove the comments, they are just there for context in this thread 😊

{
  "name": "typegen",
  "version": "0.0.1",
  "scripts": {
    "dev": "next dev", // run next normally
    "dev-with-typegen": "concurrently \"next dev\" \"pnpm xstate-typegen --watch\"", // run next and typegen in parallel
    "xstate-typegen": "xstate typegen \"./src/**/*.ts?(x)\"",
    "postinstall": "pnpm xstate-typegen" // runs typegen after pnpm install
  },
  "dependencies": {
    "next": "^12.3.1",
    "xstate": "^4.33.6"
  },
  "devDependencies": {
    "@xstate/cli": "^0.3.3",
    "concurrently": "^7.4.0",
    "prettier": "^2.7.1",
    "typescript": "^4.8.4"
  }
}

[sudden solstice]

Thanks, this is helpful

[sudden solstice]

I tried the typegen and it all works, all is typed correctly now. The confusing part is that you can't have actions/guards inline.