带有TypeScript的useMachine抛出有关类型不匹配的Typescript错误

Question

我在simple example上关注github.com/carloslfu/use-machine，以为xstate有限机器创建我的第一个示例，并因以下打字错误而陷入困境：

Argument of type '{ actions: { sideEffect: () => void; }; }' is not assignable to parameter of type 'MachineOptions<TContext, TEvent>'.
  Type '{ actions: { sideEffect: () => void; }; }' is missing the following properties from type 'MachineOptions<TContext, TEvent>': guards, activities, services, delays, updater

这是我的代码：

import { MachineConfig, assign } from "xstate";
import { TCreateContext } from "use-machine";

export type TContext = {
  counter: number;
};

export type TSchema = {
  states: {
    Off: {};
    On: {};
  };
};

export type TEvent = {
  type: "Tick";
};

const incAction = assign<TContext>(context => ({
  counter: context.counter + 1
}));

export type TMachine = TCreateContext<TContext, TSchema, TEvent>;

export const machineConfig: MachineConfig<TContext, TSchema, TEvent> = {
    initial: 'Off',
    context: {
      counter: 0
    },
    states: {
      Off: { on: { Tick: { target: 'On', actions: [incAction, 'sideEffect'] } } },
      On: { on: { Tick: { target: 'Off', actions: incAction } } }
    }
  }

而且我只是在组件中称呼它

const machine = useMachine<TContext, TSchema, TEvent>(machineConfig, {
  actions: {
    sideEffect: () => console.log('sideEffect')
  }
})

知道我缺少什么吗？

链接到github的发布。

Answer 1

作为carloslfu的linked on github，为完整起见，这里是一个工作示例：