Using TOGGLE machine as per apresentation but using typescript

[marioolofo]

Hello, I'm trying to implement some toggle machine as shown in the presentation "Standing on the sholders of giants".
I can't find a way to map the actions to the event with typescript:

export type ToggleSchema = {
	states: {
		inactive: {};
		active: {};
	};
};

type ToggleContext = {};

export type ToggleEvent = { type: 'TOGGLE' }; // <-- Not correct

export const ToggleMachineConfig = (action: string): MachineConfig<
	ToggleContext,
	ToggleSchema,
	ToggleEvent
> = {
	initial: 'inactive',
	states: {
		inactive: {
			on: {
				[`TOGGLE.${action}`]: 'active',
			},
		},
		active: {
			on: {
				[`TOGGLE.${action}`]: 'inactive',
			},
		},
	},
};

// If I try to use the machine as shown bellow, it don't even compile:

type EditorSchema = {
	states: {
		italic: ToggleSchema,
		bold: ToggleSchema,
	},
};

type EditorEvent = ToggleEvent; <-- ??

const EditorConfig: MachineConfig<any, EditorSchema, EditorEvent> = ({
	type: 'parallel',
	states: {
		italic: { ...ToggleMachineConfig('italic') },
		bold: { ...ToggleMachineConfig('bold') },
	},
});

I think that the ToggleEvent should be ToggleEvent to have the type mutable, but if I do this, the actions are still wrong because it is string and will never be of type T...

There's another way to do something like this and make the typings happy?

EDIT:
CodeSandbox of the problem: https://codesandbox.io/s/friendly-bell-0kykv?file=/src/index.tsx

Thanks,

Mario

[davidkpiano]

✏️ Please create a CodeSandbox (XState TypeScript template) reproduction of this. Thanks!

[Andarist]

It seems that this only might become possible in 4.1 with template literal types: https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types

[marioolofo]

Hi thanks for the answers.

@davidkpiano sandbox added: https://codesandbox.io/s/friendly-bell-0kykv?file=/src/index.tsx

@Andarist you're right, maybe only in typescript 4.1 I'll manage to make the problem go away...
you can see that besides setting ToggleMachineConfig as ToggleMachineConfig<"TOGGLE.x">("TOGGLE.x") in the sandbox, it still complains that the action is of wrong type.

[Andarist]

I believe that this PR ( #1604 ) should resolve this problem.

[marioolofo]

Yeah this may resolve the typescript problems, it'll need a concrete machine config to see if it really works but I'm happy to see that is a PR for this on the way =)
Thanks