Why action type is connected to specific event type?

[baeharam]

Related to #1387

I use assign util of @xstate/immer and want to extract actions from machine. However, when I define action with assign, TS causes error if I don't use specific event type for that action.

Reproduction and you need to see only machine.ts. You can see decrease action is causing error for typing. If you change event type of decreaseAction into { type: 'decrease' }, error will gone.

My question is that why action needs specific event type? Action shouldn't be connected to only one event. It can be used at several events like 1:N connection.

Is this intention? and how can I solve it?

[davidkpiano]

My question is that why action needs specific event type? Action shouldn't be connected to only one event. It can be used at several events like 1:N connection.

The assign<TContext, TEvent>(...) action creator currently needs the specific event type because you might use the event in the assignment itself, and of course, you can't just assume any event when it can only be a specific type of event for the transition

However, for your assign call, you're not even using event, so perhaps there are ways to improve this on the XState side, but for now, assign<SomeContext, any>(...) suffices.

[baeharam]

@davidkpiano

However, for your assign call, you're not even using event

Because, it is just example to show error. I'm using event in my real codebase and it is causing error. But, there is no compilation error, just VSCODE is showing error. Therefore, I think there are two solutions.

1. Just ignore error of VSCODE.
2. Just change TEvent to any and disable linter for that line.

What is best choice?

[davidkpiano]

If you want to be type-safe, the best thing to do is to provide the exact event that can be used for that action:

interface ExampleContext {
  count: number;
}

type ExtractEvent<TEvent extends EventObject, TType extends TEvent['type']> = Extract<TEvent, { type: TType }>

type ExampleEvent = { type: "increase" } | { type: "decrease" };

type ExampleState = { value: "idle"; context: ExampleContext };

const increaseAction = assign<ExampleContext, ExtractEvent<ExampleEvent, 'increase'>>(
  (context) => {
    ++context.count;
  }
);

const decreaseAction = assign<ExampleContext, ExtractEvent<ExampleEvent, 'decrease'>>((context) => {
  --context.count;
});

[baeharam]

I thought this solution also, but your ExtractEvent is good way. Thx

[Andarist]

The best choice depends on what do you feel is right for your use case and how much type-safe you want to get in a particular situation.