Type error when specifying payload type

[Ed Boucher]

I've got the following code, converted from JavaScript, where it works fine. The call to createLogic works, but for some reason the call to createLogicMiddleware doesn't- I get one of those beastly, console-filling TypeScript errors .

If I replace the payload type FetchPayload with any, and then do some type coercion to get the clientId from the payload, it compiles fine. If I specify the type of payload then createLogic works, and createLogicMiddleware gives me an error.

Any ideas? Really can't unpick this one, and the fact that it starts complaining about the optional Validate hook seems bizarre.

interface Dependencies {
    api: API
}

interface FetchPayload {
    clientId: ClientID
}

type FetchAction = {
    type: string,
    payload: { clientId: string }
}

type TestAppState = {
    clientInfo: {}
}

type FetchLogic = Logic <TestAppState, FetchPayload, any, Dependencies>

export const fetchClientInfoLogic: FetchLogic = createLogic({
    type: FETCH_CLIENT_INFO,
    latest: true,
    async process({ action, api }, dispatch, done) {
        
        const { clientId } = action.payload
        const response: Response = await api.client.get(clientId)

        if (response.ok) {
            const client: Client = await response.json()
            dispatch({
                type: FETCH_CLIENT_INFO_COMPLETE,
                payload: client
            })
        }

        else {
            dispatch({ type: FETCH_CLIENT_INFO_ERROR })
        }

        done()
    }
})

export const getLogicMiddleware = ( dependencies: Dependencies ) => {

    return createLogicMiddleware<TestAppState, Dependencies>(
        [fetchClientInfoLogic], //Error
        dependencies
    )

}

And here's the error

TypeScript error: Argument of type '(Override<Base<TestAppState, Action<string, FetchPayload, any>, string> & Validate<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined> & Process<...>, { ...; }> | Override<...>)[]' is not assignable to parameter of type '(Override<Base<TestAppState, Action<string, any, any>, string> & Validate<TestAppState, Action<string, any, any>, Dependencies, undefined> & Process<TestAppState, Action<string, any, any>, Dependencies, undefined>, { ...; }> | Override<...>)[]'.
  Type 'Override<Base<TestAppState, Action<string, FetchPayload, any>, string> & Validate<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined> & Process<...>, { ...; }> | Override<...>' is not assignable to type 'Override<Base<TestAppState, Action<string, any, any>, string> & Validate<TestAppState, Action<string, any, any>, Dependencies, undefined> & Process<TestAppState, Action<string, any, any>, Dependencies, undefined>, { ...; }> | Override<...>'.
    Type 'Override<Base<TestAppState, Action<string, FetchPayload, any>, string> & Validate<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined> & Process<TestAppState, Action<...>, Dependencies, undefined>, { ...; }>' is not assignable to type 'Override<Base<TestAppState, Action<string, any, any>, string> & Validate<TestAppState, Action<string, any, any>, Dependencies, undefined> & Process<TestAppState, Action<string, any, any>, Dependencies, undefined>, { ...; }> | Override<...>'.
      Type 'Override<Base<TestAppState, Action<string, FetchPayload, any>, string> & Validate<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined> & Process<TestAppState, Action<...>, Dependencies, undefined>, { ...; }>' is not assignable to type 'Override<Base<TestAppState, Action<string, any, any>, string> & Validate<TestAppState, Action<string, any, any>, Dependencies, undefined> & Process<TestAppState, Action<string, any, any>, Dependencies, undefined>, { ...; }>'.
        Types of property 'validate' are incompatible.
          Type 'Hook<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined> | undefined' is not assignable to type 'Hook<TestAppState, Action<string, any, any>, Dependencies, undefined> | undefined'.
            Type 'Hook<TestAppState, Action<string, FetchPayload, any>, Dependencies, undefined>' is not assignable to type 'Hook<TestAppState, Action<string, any, any>, Dependencies, undefined>'.  TS2345

    83 | 
    84 |     return createLogicMiddleware<TestAppState, Dependencies>(
  > 85 |         [fetchClientInfoLogic],
       |         ^
    86 |         dependencies
    87 |     )
    88 | 

EDIT:

since I can't post a reply, here's a fix:

Just ran into this exact problem again. Always fun finding your own questions when googling for things. However, here's a new workaround: if you cast the type property of the logic to string the error goes away, i.e.

export const fetchClientInfoLogic: FetchLogic = createLogic({
    type: FETCH_CLIENT_INFO as string,
    latest: true,
    ...

[majiang]

I have encountered the same problem.
It seems that, though the value of validate is undefined, its type is more specific and incompatible.

[Thahzan Mohomed]

Any resolutions for this error?