Xstate fsm typescript 與 TState 不兼容

Question

我已經開始使用 xstate/fsm 並且在聲明 TState 類型時遇到了問題。

import {createMachine, EventObject, StateMachine} from '@xstate/fsm';
import {Typestate} from "@xstate/fsm/lib/types";
export interface InitContext {
  retries: number;
}
export interface InitState extends Typestate<InitContext> {
  value: any;
  context: InitContext;
}
export type InitEvent =
    | { type: "LOG_IN" }
    | { type: "FETCHED" }
    | { type: "ERROR" }
    | { type: "RESTART" };
export type InitEvent =
| { type: "LOG_IN" }
| { type: "FETCHED" }
| { type: "ERROR" }
| { type: "RESTART" }

machine!: StateMachine.Machine<InitContext, InitEvent, InitState>;
machine2!: StateMachine.Machine<InitContext, EventObject, { value: any; context: InitContext }>;

this.machine = createMachine<InitContext>({}); // this does not work
this.machine2 = createMachine<InitContext>({}); // this works

錯誤是：

TS2322: Type 'Machine<InitContext, EventObject, { value: any; context: InitContext; }>' is not assignable to type 'Machine<InitContext, InitEvent, InitState>'.   
Types of property 'transition' are incompatible.     
Type '(state: string | State<InitContext, EventObject, { value: any; context: InitContext; }>, event: string | EventObject) => State<...>' is not assignable to type '(state: string | State<InitContext, InitEvent, InitState>, event: "FETCH_CONFIG" | "LOG_IN" | "FETCH_MAIN_DATA" | "FETCH_LINKED_DATA" | "FETCHED" | "ERROR" | "RESTART" | InitEvent) => State<...>'.       
Types of parameters 'state' and 'state' are incompatible.         
Type 'string | State<InitContext, InitEvent, InitState>' is not assignable to type 'string | State<InitContext, EventObject, { value: any; context: InitContext; }>'.           
Type 'State<InitContext, InitEvent, InitState>' is not assignable to type 'string | State<InitContext, EventObject, { value: any; context: InitContext; }>'.             
Type 'State<InitContext, InitEvent, InitState>' is not assignable to type 'State<InitContext, EventObject, { value: any; context: InitContext; }>'.
Types of property 'actions' are incompatible.                 
Type 'ActionObject<InitContext, InitEvent>[]' is not assignable to type 'ActionObject<InitContext, EventObject>[]'.
Type 'ActionObject<InitContext, InitEvent>' is not assignable to type 'ActionObject<InitContext, EventObject>'.
Type 'EventObject' is not assignable to type 'InitEvent'.

如何正確定義InitState和InitEvent ？ 方法createMachine定義為：

export declare function createMachine<TContext extends object, TEvent extends EventObject = EventObject, TState extends Typestate<TContext> = {
    value: any;
    context: TContext;
}>(fsmConfig: StateMachine.Config<TContext, TEvent, TState>, implementations?: {
    actions?: StateMachine.ActionMap<TContext, TEvent>;
}): StateMachine.Machine<TContext, TEvent, TState>;

Answer 1

這邊走：

this.machine = createMachine<InitContext, InitEvent, InitState>({