Type Errors in Debounce Machine

[Blitz2145]

Found a small issue in the catalogue, it looks like the debounce machine the catalogue, has 2 type errors. I'm using typescript 4.3.2.

src/machines/debounceMachine.tsx:46:7 - error TS2322: Type 'AssignAction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionObject<DebounceMachineContext, DebounceMachineEvent> | ActionFunction<DebounceMachineContext, DebounceMachineEvent>'.
  Type 'AssignAction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionObject<DebounceMachineContext, DebounceMachineEvent>'.
    Types of property 'exec' are incompatible.
      Type 'ActionFunction<{ action: undefined; }, DebounceMachineEvent> | undefined' is not assignable to type 'ActionFunction<DebounceMachineContext, DebounceMachineEvent> | undefined'.
        Type 'ActionFunction<{ action: undefined; }, DebounceMachineEvent>' is not assignable to type 'ActionFunction<DebounceMachineContext, DebounceMachineEvent>'.
          Types of parameters 'context' and 'context' are incompatible.
            Type 'DebounceMachineContext' is not assignable to type '{ action: undefined; }'.

46       clearAction: assign({
         ~~~~~~~~~~~

src/machines/debounceMachine.tsx:55:16 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

55         return context.action();
                  ~~~~~~~~~~~~~~


Found 2 errors.

[mattpocock]

@Blitz2145 Could you post your tsconfig too?

[Blitz2145]

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules", "deployment"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

[jaensen]

Hi! I experienced a similar problem in the "Authentication" example in the "clearUserDetailsFromContext"-action:

Error:(101, 13) TS2322: Type 'AssignAction<{ userDetails: undefined; }, AuthenticationMachineEvent>' is not assignable to type 'ActionObject<AuthenticationMachineContext, AuthenticationMachineEvent> | ActionFunction<AuthenticationMachineContext, AuthenticationMachineEvent>'.
  Type 'AssignAction<{ userDetails: undefined; }, AuthenticationMachineEvent>' is not assignable to type 'ActionObject<AuthenticationMachineContext, AuthenticationMachineEvent>'.
    Types of property 'exec' are incompatible.
      Type 'ActionFunction<{ userDetails: undefined; }, AuthenticationMachineEvent> | undefined' is not assignable to type 'ActionFunction<AuthenticationMachineContext, AuthenticationMachineEvent> | undefined'.
        Type 'ActionFunction<{ userDetails: undefined; }, AuthenticationMachineEvent>' is not assignable to type 'ActionFunction<AuthenticationMachineContext, AuthenticationMachineEvent>'.
          Types of parameters 'context' and 'context' are incompatible.
            Type 'AuthenticationMachineContext' is not assignable to type '{ userDetails: undefined; }'.

Disabling the "strict"-mode in the tsconfig resolved the issue for me (obviously by sacrificing strict type checking).

[christianchown]

(also: clearAction is defined, but not used in the machine)?

[olholm]

@jaensen As a workaround, providing a function to assign fixes the issue for me in the Authentication machine (although this is not the recommended way of assigning according to the docs)

clearUserDetailsFromContext: assign((ctx) => ({
  userDetails: undefined,
}))