Skip to content

Type error when specifying payload type #149

Open
@EdBoucher

Description

@EdBoucher

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,
    ...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions