Typing createAsyncThunk with JSDoc?

[Arkellys]

I'm trying to write types with JSDoc for an action created with createAsyncThunk, but I can't find a way to get the correct return type for getState. I get the expected type ParamType for params but getState always return unknown:

/**
 * @import { AsyncThunk } from "@reduxjs/toolkit"
 * @type {AsyncThunk<any, ParamType, { state: AppState }>}
 */

export const myAction = createAsyncThunk(
    ACTIONS.MY_ACTION,
    async (params, { getState }) => {
        const state = getState() // returns type `unknown`
        // ...
    },
);

As far as I know, what I pass seems correct. AppState is an object, and I also tried with dummy objects and strings to be sure it was not the problem, but I still get unknown.

I'm aware of the documentation of Redux usage with TS, but I don't use TS, and I can't understand why writing the type like this works for everything but the custom ThunkApiConfig.

[EskiMojo14]

I think your best bet is annotating the payload creator instead:

export const myAction = createAsyncThunk(
    ACTIONS.MY_ACTION,
    /** @type {import("@reduxjs/toolkit").AsyncThunkPayloadCreator<any, ParamType, { state: AppState }>}
    async (params, { getState }) => {
        const state = getState() // returns type `AppState`
        // ...
    },
);

[Arkellys]

@phryneas I'm very sorry if my tone was "snarky", it's not against the lib or people here. I spent too much time trying to solve this problem without taking a break, and too much time figuring out where the problem was. It definitely frustrated me. 😅

I didn't know about yarn patch, I've discovered it with the message of EskiMojo14, and I will clearly take a look at it!

As I said, using AsyncThunkPayloadCreator doesn't work with async function. The inline import may not throw the error, but using @import does, and TS playground shows the error is correct. Appart from not liking the synthax, the inline import also hides an error. I'm not expert on TS, so maybe I've just misunderstood something?

AFAIK, I cannot use withTypes with JSDoc. But all I need is the first overload of createAsyncThunk to accept ThunkApiConfig as third param. So from this:

<Returned, ThunkArg = void>(
    typePrefix: string,
    payloadCreator: AsyncThunkPayloadCreator<
      Returned,
      ThunkArg,
      CurriedThunkApiConfig
    >,
    options?: AsyncThunkOptions<ThunkArg, CurriedThunkApiConfig>,
  ): AsyncThunk<Returned, ThunkArg, CurriedThunkApiConfig>

To this:

<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig>(
    typePrefix: string,
    payloadCreator: AsyncThunkPayloadCreator<
      Returned,
      ThunkArg,
      ThunkApiConfig
    >,
    options?: AsyncThunkOptions<ThunkArg, ThunkApiConfig>,
  ): AsyncThunk<Returned, ThunkArg, ThunkApiConfig>

And now everything works like a charm with:

/**
 * @import { AsyncThunk } from "@reduxjs/toolkit"
 * @type {AsyncThunk<any, ParamType, { state: AppState }>}
 */

TS flavored JSDoc is a very nice alternative to get typing without needing a transpiler. I don't think it's the hard way, I've managed to do some pretty complex things with it. So far typing Redux actions is the only thing I've really struggled with, it's indeed not made to support JSDoc. 🥲

[EskiMojo14]

pretty nasty, but you can simulate calling withTypes like this:

import { createAsyncThunk } from "@reduxjs/toolkit";

/** @type {ReturnType<typeof createAsyncThunk.withTypes<{ state: "foo" }>>} */
const createWithTypes = createAsyncThunk

[Arkellys]

Interesting, I didn't know it was possible to do that! I may give it a try and see what I can do or if the patch is easier. Thank you again. 🙂

[markerikson]

@Arkellys :

typing Redux actions shouldn't be so complicated

I'll echo Lenz's comments. The RTK types do work well, when used as intended. You've made the entire process much harder on yourself.

There's always room for legitimate improvements, and we do welcome suggestions, but complaining "this is hard and doesn't work right" when you're not using it the way we intended is not helpful.

[Arkellys]

But I never said it was not working right, and I made it clear I was trying to type with JSDoc instead of TS and that I was aware there was a doc made for TS. I did said it was looking like bugs to me because I could see AsyncThunk was taking a ThunkApiConfig, but I couldn't understand why it was ignoring it. That's why I asked in this discussion. I was genuinely just trying to understand if it was a bug and how I could fix it on my side, I never expected for the lib to do it.