Typing problem in invoke part

[ManResurre]

import { assign, fromPromise, setup } from 'xstate';
import { LoginService } from './LoginService';

export interface FetchContext {
  retries: number;
  loginService: LoginService;
  error: unknown;
  user: { userId: string } | undefined;
}

type FETCH_EVENT = { type: 'FETCH', email: string };

const config = {
  context: {
    retries: 0,
    loginService: new LoginService(),
    error: undefined,
    user: undefined,
  },
  id: 'auth',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: {
          target: 'loading',
        },
      },
    },
    loading: {
      invoke: [{
        id: 'login',
        src: fromPromise(async ({ input }: { input: { email: string, loginService: any } }) => {
          console.log(input);
          return true;
        }),
        input: ({ context, event }: { context: FetchContext, event: FETCH_EVENT }) => ({
          email: event.email,
          loginService: context.loginService,
        }),
        onDone: {
          target: 'success',
          actions: assign({ user: ({ event }) => event.output }),
        },
        onError: {
          target: 'failure',
          actions: assign({ error: ({ event }) => event.error }),
        },
      }] as const,
    },
    success: {
      type: 'final' as const,
    },
    failure: {
      always: {
        target: 'idle',
      },
    },
  },
} as const;
export const loginStateMachine = setup({
  types: {
    context: {} as FetchContext,
    events: {} as any,
  },
}).createMachine(config);

• "xstate": "^5.19.2"
• "typescript": "^5.7.3",

TS2345: Argument of type '{ readonly context: { readonly retries: 0; readonly loginService: LoginService; readonly error: undefined; readonly user: undefined; }; readonly id: "auth"; readonly initial: "idle"; readonly states: { ...; }; }' is not assignable to parameter of type 'MachineConfig<FetchContext, any, never, never, never, never, string, NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject>'.
  Type '{ readonly context: { readonly retries: 0; readonly loginService: LoginService; readonly error: undefined; readonly user: undefined; }; readonly id: "auth"; readonly initial: "idle"; readonly states: { ...; }; }' is not assignable to type 'Omit<StateNodeConfig<FetchContext, any, never, never, never, never, string, NonReducibleUnknown, EventObject, MetaObject>, "output">'.
    Types of property 'states' are incompatible.
      Type '{ readonly idle: { readonly on: { readonly FETCH: { readonly target: "loading"; }; }; }; readonly loading: { readonly invoke: readonly [{ readonly id: "login"; readonly src: PromiseActorLogic<boolean, { email: string; loginService: any; }, EventObject>; readonly input: ({ context, event }: { context: FetchContext; e...' is not assignable to type 'StatesConfig<FetchContext, any, never, never, never, never, string, NonReducibleUnknown, EventObject, MetaObject>'.
        Property 'loading' is incompatible with index signature.
          Type '{ readonly invoke: readonly [{ readonly id: "login"; readonly src: PromiseActorLogic<boolean, { email: string; loginService: any; }, EventObject>; readonly input: ({ context, event }: { context: FetchContext; event: FETCH_EVENT; }) => { ...; }; readonly onDone: { ...; }; readonly onError: { ...; }; }]; }' is not assignable to type 'StateNodeConfig<FetchContext, any, never, never, never, never, string, NonReducibleUnknown, EventObject, MetaObject>'.
            Types of property 'invoke' are incompatible.
              Type 'readonly [{ readonly id: "login"; readonly src: PromiseActorLogic<boolean, { email: string; loginService: any; }, EventObject>; readonly input: ({ context, event }: { context: FetchContext; event: FETCH_EVENT; }) => { ...; }; readonly onDone: { ...; }; readonly onError: { ...; }; }]' is not assignable to type 'readonly never[]'.
                Type '{ readonly id: "login"; readonly src: PromiseActorLogic<boolean, { email: string; loginService: any; }, EventObject>; readonly input: ({ context, event }: { context: FetchContext; event: FETCH_EVENT; }) => { ...; }; readonly onDone: { ...; }; readonly onError: { ...; }; }' is not assignable to type 'never'.
    64 |     events: {} as any,
    65 |   },
  > 66 | }).createMachine(config);

I tried different approaches, nothing helped, except setup any

 invoke: [{
        id: 'login',
        src: fromPromise(async ({ input }: { input: { email: string, loginService: any } }) => {
          console.log(input);
          return true;
        }),
        input: ({ context, event }: { context: FetchContext, event: FETCH_EVENT }) => ({
          email: event.email,
          loginService: context.loginService,
        }),
        onDone: {
          target: 'success',
          actions: assign({ user: ({ event }) => event.output }),
        },
        onError: {
          target: 'failure',
          actions: assign({ error: ({ event }) => event.error }),
        },
      }] as any,

but there is still a mistake in the idea

Argument type {readonly initial: "idle", readonly context: {retries: 0, loginService: LoginService, error: undefined, user: undefined}, readonly id: "auth", readonly states: {idle: {on: {FETCH: {target: "loading"}}}, success: {type: string}, failure: {always: {target: "idle"}}, loading: {invoke: any}}} is not assignable to parameter type MachineConfig<FetchContext, AnyEventObject, ToProvidedActor<{}, {}>, ToParameterizedObject<{}>, ToParameterizedObject<{}>, never, string, {} | null | undefined, {} | null | undefined, EventObject, MetaObject>

so I decided to ask the community for help

[with-heart]

I think there are two major issues with your approach here:

1. not writing config inline

   createMachine does a lot of work to make the appropriate types available in the appropriate locations in your config, but that work is wasted when you write config as a separate variable rather than inline.

   In your example code, config is just a plain object so it has no idea what the type of anything is unless you explicitly provide a type and it has no knowledge of the relationships between things (like the relationship between the type of src.input and the return type of the input function).

   If you write the config inline inside of createMachine, you're going to have a significantly better experience using xstate with TypeScript.

2. not defining your actor in setup

   Similar to createMachine, setup does a lot of work to make the appropriate types available in the appropriate locations in your config.

   It allows us to pre-define our logic (actions, actors, guards, etc.) and then reference that logic by name in our config. It also helps to establish some of the type relationships mentioned earlier.

If we change your code to avoid those major issues, we can see how much cleaner things become:

import { assign, fromPromise, setup } from 'xstate'
import { LoginService } from './LoginService'

export interface FetchContext {
  retries: number
  loginService: LoginService
  error: unknown
  user: { userId: string } | undefined
}

export const loginStateMachine = setup({
  types: {
    context: {} as FetchContext,
    events: {} as { type: 'FETCH'; email: string },
  },
  actors: {
    login: fromPromise(
      async ({ input }: { input: { email: string; loginService: any } }) => {
        console.log(input)
        return undefined
      },
    ),
  },
}).createMachine({
  context: {
    retries: 0,
    loginService: new LoginService(),
    error: undefined,
    user: undefined,
  },
  id: 'auth',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: {
          target: 'loading',
        },
      },
    },
    loading: {
      invoke: [
        {
          id: 'login',
          src: 'login',
          input: ({ context, event }) => ({
            email: event.email,
            loginService: context.loginService,
          }),
          onDone: {
            target: 'success',
            actions: assign({ user: ({ event }) => event.output }),
          },
          onError: {
            target: 'failure',
            actions: assign({ error: ({ event }) => event.error }),
          },
        },
      ],
    },
    success: {
      type: 'final',
    },
    failure: {
      always: {
        target: 'idle',
      },
    },
  },
})

We also gain type safety in a number of locations that didn't previously exist:

• the arguments to invoke[0].input are automatically typed
• if the return type of invoke[0].input isn't { email: string; loginService: any }, we'll receive a type error
• the type of event.output in onDone is automatically derived from the return type of actors.login
• lots more that I don't have the time to list out right now

In conclusion, unless you have a very specific reason for not defining your config inline and not defining your login inside setup, you should always do so. The benefits to doing so when using TypeScript are limitless.

[with-heart]

tl;dr: Let setup+createMachine guide you in writing your machine configuration. You'll have a much more enjoyable time using xstate 😁