如何在 Redux Toolkit 中正确覆盖 AsyncThunk 的泛型

Question

我有一些像这样的短代码：

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);
}

做 <any, any, any> 让我通过 TS 直到我做 addCase 它不知道 thunk 有 .fulfilled 或 .rejected 属性。

docs这样说：

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.

如果它们赋予 rejected 和 fulfilled 属性，我不确定它们如何通用。

不确定该怎么做，因为如果我不重写界面副本，这些东西似乎不会导出。我希望我遗漏了什么！

Answer 1

您只是使用了太多注释。

看这两个代码片段：

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

和

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

在第一种情况下，实际上什么都没有发生。在第二种情况下，TS 告诉你 x 是 5 并且永远不可能是 4.

有用的信息。为什么我们在第一种情况下没有收到警告？
通过手动为您的变量指定类型，您实际上删除了以前可用的有价值的信息。

这里也是一样。如果删除 return 类型注释，则 return 类型将 1:1 成为 createAsyncThunk 的 return 类型并且成为 much 比您可以手动注释的任何内容都更准确。

特别是在 Redux Toolkit 中，这些类型不适合手写，因为它们有时会填满整个屏幕。我可以自信地说，我是实施和设计其中大部分类型的人。您将获得惊人的自动完成功能，但您真的不必手动注释这些变量。

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

所以除非你有充分的理由，否则请忽略那些不必要的注释。通常，类型注释只在函数输入位置才真正需要，因为它们不能在那里推断。

如何在 Redux Toolkit 中正确覆盖 AsyncThunk 的泛型

How do I properly overwrite generic of AsyncThunk in Redux Toolkit

typescript

redux-toolkit