Typescript, Actor and useActor problem

[RafalFilipek]

Hi,

I'm trying to upgrade to @xstate/react@1.0.1 and I have some problems with useActor typings. Here you can find simple repro: https://codesandbox.io/s/busy-pike-5cguo?file=/src/App.tsx

I have no idea how to type spawned actor in main machine to pass it to child component and use this actor in useActor. Before version 1.0.1 (0.8.1), I had in my code useService instead of useActor. Now I can't do this because I got `... use "useActor" instead" error.

Thanks

🙏

[GeospatialMax]

Have exactly the same issue. I can of course just set the prop I am passing in to any but then I would loose all the types.

I have tried:

• typing the prop as Actor: goes through fine, but looses all types, e.g. for sending an event
• typing as Actor<MyEventType, MyEventContext>: gives me an error about type mismatch (not what useActor expects)

Our usecase is the same as @RafalFilipek 's. We are spawning a machine in a parent machine and pass the reference down to a child component so that it can be used in there. Previously our typing for that reference was

export type MyInterpreter = Interpreter<
  MyMachineContextType,
  MyMachineStateSchema,
  MyMachineEventType,
  any
>;

Any help would be much appreciated, otherwise we would probably have to downgrade again :-)

[davidkpiano]

Have you tried this locally? There are tests that show that typings work with spawned machines: https://github.com/davidkpiano/xstate/blob/master/packages/core/test/actor.test.ts#L79-L140

So I'm wondering if this is a CodeSandbox + TypeScript issue.

[GeospatialMax]

The section you have highlighted uses Interpreter<any, any> for the spawned actor (the server machine ref) as well - but when we try using this same type for feeding the actor into the useActor hook it will also complain.

E.g. in my specific case it was saying:

Argument of type 'SlicePreviewMachineInterpreter' is not assignable to parameter of type 'Actor<any, AnyEventObject> | ActorRefLike<EventObject, State<SlicePreviewContext, SlicePreviewEvent, any, any>>'.
  Type 'Interpreter<SlicePreviewContext, SlicePreviewStateSchema, SlicePreviewEvent, any>' is not assignable to type 'ActorRefLike<EventObject, State<SlicePreviewContext, SlicePreviewEvent, any, any>>'.
    Types of property 'send' are incompatible.
      Type '(event: SlicePreviewEvent | "PREPARE_PREVIEW" | "CHANGE_VISUALISATION" | "UPDATE_DIMENSIONS" | "SLICE_DATA_RECEIVED" | "SHOW_PREVIEW" | Event<SlicePreviewEvent>[] | Event<...>, payload?: EventData) => State<...>' is not assignable to type 'Sender<EventObject>'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'EventObject' is not assignable to type 'SlicePreviewEvent | "PREPARE_PREVIEW" | "CHANGE_VISUALISATION" | "UPDATE_DIMENSIONS" | "SLICE_DATA_RECEIVED" | "SHOW_PREVIEW" | Event<SlicePreviewEvent>[] | Event<...>'.
            Type 'EventObject' is missing the following properties from type 'Event<SlicePreviewEvent>': name, data, $$typets(2345)

But digging in error messages can sometimes help, so I think the solution for typing the actor correctly is:

ActorRefLike<SlicePreviewEvent, State<SlicePreviewContext, SlicePreviewEvent, any, any>>

Or. more generically:

ActorRefLike<MachineEventType, State<MachineContextType, MachineEventType, any, any>>

Doing it that way I get everthing nicely typed 👍

[davidkpiano]

Thanks for doing the investigation here! Let me see if there's anything we can do on our end to make this easier (or fix what needs to be fixed).

EDIT: Do you have a CodeSandbox of this we can play around with?

[GeospatialMax]

No worries, I don't have a CodeSandbox for this currently, but can create one later.

[RafalFilipek]

Updated example with @xstate/react 1.0.2 and xstate 4.14.0

https://codesandbox.io/s/busy-pike-5cguo?file=/src/App.tsx

[Andarist]

Thank you for the example - I'm looking into it.

[davidkpiano]

This PR would address/fix this issue: #1622

Notably, it:

• loosens the ActorRef<TEvent, TEmitted> type to be compatible with the v4 Actor<...> types that spawn(...) returns
• introduces ActorRefFrom<SomeMachine> to make it easier to type spawned machines:

const childMachine = createMachine(...);

interface SomeContext {
  machineRef?: ActorRefFrom<typeof childMachine>
}

const parentMachine = createMachine<SomeContext>({
  // ...
  entry: assign({
    machineRef: (ctx, e) => spawn(childMachine)
  })
});

// ... in a component

const ChildComponent: React.FC<{ child: ActorRefFrom<typeof childMachine> }> = ({ child }) => {
  const [state, send] = useActor(child);

  // ...
}