typescript :返回基于对象中 ReturnTypes 的联合

标签 typescript

我的初始代码如下,它允许我在执行 switch on action:ActionType 时根据 type 检测 data 的类型。

enum Actions {
  GET_MESSAGES,
  GET_MESSAGES_LOADED
}

//@ts-ignore
const AppActions = {
  getMessages() {
    return {
      type: Actions.GET_MESSAGES,
      data:{id: 1}
    };
  },
  getMessagesLoaded() {
    return {
      type: Actions.GET_MESSAGES_LOADED,
      data:{messages: ['asdf']}
    };
  }
};

type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>;


const func = (action:ActionType) => {
  // @ts-ignore
  switch (action.type) {
      case Actions.GET_MESSAGES:
          console.log(action.data.id) //Should pass
          break
      case Actions.GET_MESSAGES_LOADED:
        console.log(action.data.messages) //Should pass
          break;
      case Actions.GET_MESSAGES_ERROR: // Should throw typescript error
      // default:
      //   break;
  }
};

我想知道的是,我可以通过映射 AppActions 的键来动态创建 ActionType 联合吗?

目前最接近的答案

@Elias 到目前为止对 type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>; 的回答消除了此处的大部分膨胀。

只要 AppActions 中的每个函数都有指定的返回类型,上面的方法就可以完美运行,没有这个数据类型就无法检测到,但是它确实检测到正确的 Actions。GET_MESSAGES_ERROR 是一个无效的 action.type。

最佳答案

此答案可用于提取类型,但类型保护无法解析并揭示底层类型!

enter image description here

enter image description here

分析器

type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>;

您甚至不需要指定函数的返回类型:

const AppActions = {
    getMessages() {
        return {
            messages: ["asdf"],
        };
    },
    getMessagesLoaded() {
        return {
            loadedMessages: [1],
        }
    },
};

关于 typescript :返回基于对象中 ReturnTypes 的联合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68703207/

相关文章:

typescript - 构建类数组以在 TypeScript 中使用重载构造函数执行静态方法

typescript - Mapbox-gl 输入不允许 accessToken 分配

javascript - 类型 'NodeListOf<HTMLLIElement>' 不可分配给类型 'Element[]'

javascript - 将 JavaScript\Ionic\Angular 1 应用迁移到 Typescript\Ionic 2\Angular 2 应用

reactjs - Ant.design 没有检测到 Form.Item React 中的自定义输入组件

typescript - Typescript 中的接口(interface)有什么区别?

带有 ngx-translate 的 Angular + Electron

typescript - 使用 Typescript 创建自定义 Jasmine 匹配器

javascript - Typescript rxjs 可观察数组连接

javascript - 使用 TypeScript 仅加载 highlight.js 库,而不是默认加载所有语言