How do I properly overwrite generic of AsyncThunk in Redux Toolkit

user_511501 0
Viewed 228

I have some short code like this:

import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';

export type ThunkCallback = (...any) => Promise<string>;

export default function getCanvasThumbnail(
  callback: ThunkCallback,
): AsyncThunk<any, any, any> {
  return createAsyncThunk('panel/get-canvas-thumbnail', callback);
}

Doing <any, any, any> gets me past TS up until I do addCase where it won't know that the thunk has .fulfilled or .rejected properties.

The docs say this:

Also, as TS cannot mix explicit and inferred generic parameters, from this point on you'll have to define the Returned and ThunkArg generic parameter as well.

I'm not sure how these are generic if they are what give the rejected and fulfilled properties.

Unsure what to do given it seems these things aren't exported without me re-writing a copy of the interface. I hope I am missing something!

redux-toolkit typescript
1 Answers

You are simply using too many annotations.

Take these two code snippets:

const x: number = 5
if (x == 4) { console.log("impossible") }

and

const x = 5
// this will warn
if (x == 4) { console.log("impossible") }

In the first case, nothing really happened. In the second case, TS tells you that x is 5 and can never be 4.

Useful information. Why didn't we get that warning in the first case?
By manually specifying a type for your variable, you actually removed valuable information that was available before.

The same applies here. If you remove the return type annotation, the return type will 1:1 be the return type of createAsyncThunk and be much more accurate than anything you could annotate by hand.

Especially in Redux Toolkit, these types are not meant to be written by hand as they would sometimes fill up your whole screen. I can say that with confidence, I am the one who implemented & designed most of those types. You will get amazing autocomplete, but you really have to not annotate those variables manually.

export default function getCanvasThumbnail(
  callback: ThunkCallback,
) /* without a return type annotation, this is typed perfectly */ {
  return createAsyncThunk('panel/get-canvas-thumbnail', callback);
}

So leave out those unneccessary annotations unless you have a good reason for them. Generally, type annotations are only really required in function input positions, as they cannot be inferred there.

user_20759440
Related