Typescript:为文件中的所有函数声明 ReturnType(如何创建 redux 操作类型)

Posted

技术标签:

【中文标题】Typescript:为文件中的所有函数声明 ReturnType(如何创建 redux 操作类型)【英文标题】:Typescript: declare ReturnType for all functions in a file (how to create a redux action type) 【发布时间】:2020-11-15 22:58:29 【问题描述】:

我想为文件中的所有函数创建一个ReturnType

例如,对于 redux 操作文件:

// files.actions.ts

export const setFiles = (files: IFile[]) => (
    type: FILES_ACTION_TYPE.SET_FILES,
    payload: files,
);

export const clearFiles = () => (
    type: FILES_ACTION_TYPE.CLEAR_FILES,
    payload: undefined
);

export type FilesAction = ReturnType<typeof clearFiles | typeof setFiles>

有没有一种优雅的方式来拥有所有函数的类型,而无需手动编写每个函数?

【问题讨论】:

【参考方案1】:

虽然这不是您问题的直接答案:

我们特别建议不要手动编写动作创建器。相反,您应该使用our official Redux Toolkit package 中的the createSlice API,因为它会自动为您生成动作创建者。它也已经用 TS 编写,并确保正确键入动作创建者以匹配减速器。

与此相关,我个人认为尝试定义所有可以调度的操作的联合类型或限制可以传递给dispatch 的操作集并没有真正的好处。

【讨论】:

由于这个答案,我在我的 Angular 应用程序中实现了几个小时的 redux 工具包。我找不到任何文档或教程,例如与 NgRedux 的集成。最终我达到了目的。关于定义所有动作的联合类型 - NgRedux 调度需要 AnyAction 类型,我认为这将是解决方案。 啊,对不起。是的,大多数 Redux 用户都使用 React 作为 UI 层,所以这是我的默认工作假设。 Redux 核心团队也不维护 NgRedux,因此我们目前在我们的文档中没有任何关于使用它的信息。我想在 Redux 文档中添加一个“UI 层集成”部分,其中包含有关使用其他 UI 层的信息,但不确定何时会发生。

以上是关于Typescript:为文件中的所有函数声明 ReturnType(如何创建 redux 操作类型)的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript 声明文件全解析

Typescript 中的“声明全局”是啥?

TypeScript 构造函数中的私有变量声明以诱导 DI

如何将其他类型导入我的 TypeScript 自定义声明文件?

Webpack 和 TypeScript 无法解析 Vue 的声明文件

TypeScript构造函数中的私有变量声明以引发DI