How to type transition input in @xstate/store

[qiushiyan]

I am using the latest version of @xstate/store as an alternative to zustand. With the following store

const store = createStore(
	{ count: 0 },
	{
		inc: {
			count: (context, event: { by: number }) => context.count + event.by,
		},
		mul: {
			count: (context, event: { by2: number }) => context.count * event.by2,
		}
	},
);

I want to create wrappers of transitions, but find it hard to narrow down the transition input types given a fixed type

const inc = (input: // what type to put here?) => {
	store.send({ type: "inc", by: input.by });
};

const mul = (input: // what type to put here?) => {
	store.send({ type: "mul", by: input.by2 });
};

Searching through the .d.ts files, I am able to manually create it with the ExtractEventsFromPayloadMap generic helper

type IncInput = ExtractEventsFromPayloadMap<{
        inc : {
		by: number;
	};
}>

Now IncInput is { by: number; } & { type: "inc"; }

But I don't know how to use ExtractEventsFromPayloadMap on the entire store so I don't need to do it manually.

[davidkpiano]

Wouldn't it just be this?

const inc = (input: number) => {
	store.send({ type: "inc", by: input.by });
};

const mul = (input: number) => {
	store.send({ type: "mul", by: input.by2 });
};

[qiushiyan]

Yeah but the event type could get more complicated, and it would be helpful to have a utility type to extract event types from the store.

[with-heart]

I think you're asking how you could extract the type of each event from the Store type so you can then get the type of non-type properties from a specific event.

I'm not home right now so I can't try it myself but check out EventFrom in packages/core/src/types.ts. That type should give you an idea of how you can extract the EventObject type from Store which you could then use to extract a specific event type and get its properties.

[qiushiyan]

That's exactly what I want! Thanks I'll looking into it.

[with-heart]

I opened #5020 to implement the type EventFromStore:

export type EventFromStore<TStore extends Store<any, any>> =
  TStore extends Store<any, infer TEvent> ? TEvent : never;

If that's merged, here's how you could use it to implement what you're looking for:

import { createStore, type EventFromStore, type Store } from '@xstate/store';

/**
 * Extract the event where `Type` matches the event's `type` from the given
 * `Store`.
 */
type EventByType<
  TStore extends Store<any, any>,
  Type extends EventFromStore<TStore>['type']
> = Extract<EventFromStore<TStore>, { type: Type }>;

/**
 * Extract a specific store event's "input" type (the event type without the
 * `type` property).
 */
type EventInputByType<
  TStore extends Store<any, any>,
  Type extends EventFromStore<TStore>['type']
> = Omit<EventByType<TStore, Type>, 'type'>;

const store = createStore(
  { count: 0 },
  {
    inc: (context, event: { by: number }) => ({
      count: context.count + event.by
    }),
    mul: (context, event: { by2: number }) => ({
      count: context.count * event.by2
    })
  }
);

const inc = (input: EventInputByType<typeof store, 'inc'>) =>
  store.send({ type: 'inc', by: input.by });

const mul = (input: EventInputByType<typeof store, 'mul'>) =>
  store.send({ type: 'multiply', by2: input.by2 });

Or just add the EventFromStore type locally and do what you want anyway :)

[qiushiyan]

Excellent. Thank you so much!