use-machine icon indicating copy to clipboard operation
use-machine copied to clipboard

Support needed for Typescript

Open toncic opened this issue 4 years ago • 1 comments

I was following your example from README to create a simple state machine with Typescript, but I got TS error: 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

Here is my code:

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

And than in component I'm just calling

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

Any idea what I'm missing in this example? Thanks

toncic avatar Nov 18 '19 08:11 toncic

Hi @toncic, here is an updated example https://github.com/carloslfu/use-machine/blob/master/src/index.spec.tsx#L10.

carloslfu avatar Nov 25 '19 01:11 carloslfu