在 Typescript 中键入自定义 react-redux 连接函数答案

【问题标题】：Typing a custom react-redux connect function in Typescript在 Typescript 中键入自定义 react-redux 连接函数
【发布时间】：2018-09-02 00:29:45
【问题描述】：

我有一个大型、复杂的应用程序，我正在尝试迁移到 Typescript。我们有一个特殊的限制是我们使用 createProvider 和 storeKey 选项将我们的容器连接到存储。鉴于我们有超过 100 个容器，我创建了一个辅助函数来默认自动传递此选项。这非常简单，并且在常规 JS 中可以正常工作。

function connectToStore(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
     const finalOpts = { ...options, storeKey: STORE_KEY };
     return connect(mapStateToProps, mapDispatchToProps || {}, mergeProps, finalOpts);
}

如何输入这个函数？我已经看到了连接类型声明的噩梦，我想知道是否有任何方法可以避免复制原始使用的类型声明。当然必须有一个更简洁的方法。谢谢！

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

react-redux connect 有很多重载，一些辅助类型别名是多个备选方案的联合；我想您只需要其中一些情况（例如，只有具有四个参数的重载）。如果我遇到你的情况，我会复制connect 的类型并开始注释掉我认为不适用于connectToStore 的案例。一旦对connectToStore 的所有调用都成功进行了类型检查，您就可以删除注释掉的案例。

【讨论】：

虽然我最终没有使用这种方法，但我确实怀疑这是合适的解决方案，并将其标记为正确。

【解决方案2】：

import { Connect } from "react-redux";

const connectToStore: Connect = (
  mapStateToProps,
  mapDispatchToProps,
  mergeProps,
  options = {}
) => {
  const finalOpts = { ...options, storeKey: STORE_KEY };
  return connect(
    mapStateToProps,
    mapDispatchToProps || {},
    mergeProps,
    finalOpts
  );
};

【讨论】：