Javascript useMachine with TypeScript抛出关于类型不匹配的TypeScript错误

我当时正在按照on为xstate有限机创建我的第一个示例，但遇到了以下typescript错误：

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

“{actions:{sideEffect:（）=>void；}；}”类型的

参数不能分配给“MachineOptions”类型的参数。
类型“{actions:{sideEffect:（）=>void；}；}”缺少类型“MachineOptions”中的以下属性：保护、活动、服务、延迟、更新程序

这是我的密码：

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 } } }
    }
  }

从“xstate”导入{MachineConfig，assign}；
从“使用机器”导入{TCreateContext}；
导出类型TContext={
柜台：号码；
};
出口类型TSchema={
国家：{
关：{}；
关于：{}；
};
};
导出类型TEvent={
类型：“勾选”；
};
const incAction=assign（上下文=>({
计数器：context.counter+1
}));
导出类型TMachine=TCreateContext；
导出常量machineConfig:machineConfig={
首字母：'关'，
背景：{
柜台:0
},
国家：{
关闭：{on:{Tick:{target:'on'，actions:[incAction，'sideEffect']}，
On:{On:{勾选：{target:'Off'，actions:incAction}
}
}

然后我把它叫做组件

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

const machine=useMachine（machineConfig{
行动：{
副作用：（）=>console.log（'sideEffect'）
}
})

知道我错过了什么吗

链接到由carloslfu于发布的。

，为了完成，以下是一个工作示例：

import { MachineConfig } from 'xstate';
import { useMachine } from 'use-machine';

enum SimpleStateNameWithSideEffect {
  OFF = 'OFF',
  ON = 'ON'
}

interface SimpleStateSchemaWithSideEffect {
  states: {
    [SimpleStateNameWithSideEffect.OFF]: {};
    [SimpleStateNameWithSideEffect.ON]: {};
  };
}

enum SimpleActionWithSideEffect {
  ACTIVATE = 'ACTIVATE',
  DEACTIVATE = 'DEACTIVATE'
}

enum SimpleCallbackActionWithSideEffect {
  SWITCHED = 'SWITCHED'
}

type SimpleEventsWithSideEffect =
  | { type: SimpleActionWithSideEffect.ACTIVATE }
  | { type: SimpleActionWithSideEffect.DEACTIVATE };

interface SimpleContextWithSideEffect {
  counter: number;
}

const simpleInitialContextWithSideEffect: SimpleContextWithSideEffect = {
  counter: 0
};

const simpleMachineConfigWithSideEffect: MachineConfig<
  SimpleContextWithSideEffect,
  SimpleStateSchemaWithSideEffect,
  SimpleEventsWithSideEffect
> = {
  id: 'switch',
  initial: SimpleStateNameWithSideEffect.OFF,
  states: {
    [SimpleStateNameWithSideEffect.OFF]: {
      on: {
        '': {
          target: SimpleStateNameWithSideEffect.ON,
          actions: [SimpleCallbackActionWithSideEffect.SWITCHED]
        }
      }
    },
    [SimpleStateNameWithSideEffect.ON]: {}
  }
};

对于那些偶然发现这一点的人来说，useMachine现在也作为钩子包含在

@xstate/react

库中，有关更多信息，请查看github或Official上的包

  const machine = useMachine(
    simpleMachineConfigWithSideEffect,
    {
      actions: {
        [SimpleCallbackActionWithSideEffect.SWITCHED]: () =>
          console.log('sideEffect')
      }
    },
    simpleInitialContextWithSideEffect
  );