如何将 Typescript 与 Redux Toolkit 结合使用来分派动作？答案

【问题标题】：How to use Typescript with Redux Toolkit to dispatch an action?如何将 Typescript 与 Redux Toolkit 结合使用来分派动作？
【发布时间】：2022-11-26 18:25:23
【问题描述】：

我正在尝试在我的 redux 工具包切片中使用打字稿，但是当我尝试调用一个动作时，我看不到有效负载的类型。

例如，这是一个切片： enter image description here

这是商店： enter image description here

这是我的问题，当我尝试调用 setFilters 操作时，我可以将任何我想要的内容作为有效负载，例如 {foo: 'hello'}。 enter image description here enter image description here

我想用正确的接口锁定有效载荷。可能吗？

【问题讨论】：

标签： reactjs react-redux redux-toolkit

【解决方案1】：

首先：请发布代码，而不是屏幕截图。我不会在答案中给你代码，因为我必须从你的屏幕截图中输入它——这使得回答变得非常困难。

关于问题本身：您的类型注释在此处删除了类型信息。不要写那么多注解。

例如：

const foo = 5;
const bar: number = 5

在第一种情况下，编译器知道某些东西是 number 和 5。在第二种情况下，您告诉编译器它是number，因此编译器会丢弃有关5的信息。

createSlice 的注释做同样的事情——TS 可以从使用中推断出大多数类型，但是您的手动注释删除了所有这些额外信息，因此 TypeScript 返回到没有关于有效载荷等细节的通用事物。

请参阅 TypeScript code examples in the createApi documentation 以获取有关您实际需要编写哪些类型的信息。本质上：您需要输入的只是您的initialState 和 case reducer 操作函数参数。没有其他的。

【讨论】：