使 mapStateToProps 与 Typescript 一起使用的首选方法是什么？答案

【问题标题】：What is the preferred way to make mapStateToProps work with Typescript?使 mapStateToProps 与 Typescript 一起使用的首选方法是什么？
【发布时间】：2018-01-02 18:02:08
【问题描述】：

替换这个：

function mapStateToProps(appState: ApplicationState, ownProps: any): MyComponentState {
    ...
    return {
        someObject: someObject,
        isNew: isNew
    };
}

用这个：

function mapStateToProps(appState: ApplicationState, ownProps: any): MyComponentState {
    ...
    return new MyComponentState(someObject, isNew);
}

抛出以下错误：

Connect(MyComponent) 中的
mapStateToProps() 必须返回一个普通对象。而是收到 [object Object]。

恕我直言，new CustomPageState() 的好处是提高了可读性，能够在需要时调用构造函数逻辑，并允许一种处理可选参数的好方法，因此感觉是一种更好的方法（在 Typescript 中工作时） .

在这种情况下完成返回普通对象的推荐/最佳实践方法是什么？

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

据我了解 React/Redux，您的第一个代码 sn-p 似乎更正确地实现了。 mapStateToProps 应该以普通对象的形式返回您状态的子集，以减少开销。返回一个完全构造的状态对象似乎违背了目的。

如果你想在mapStateToProps 中保持干净，我会向MyComponentState 添加一个返回普通对象的方法。在这种情况下返回 MyComponentState 类型似乎也不正确，因为同样需要一个普通对象。如果你想要一个明确的属性列表，我建议创建一个接口（例如IComponentStateProps）并在你的类中实现它MyComponentState implements IComponentStateProps { ... }

【讨论】：

关于子集概念的优秀观点！正如你所建议的那样，这让我重新回到了一个简单的对象。

【解决方案2】：

我决定在返回类型中添加| any。

mapStateToProps(appState: ApplicationState, ownProps: any): MyComponentState | any 
{
    ...
    return {
        someObject: someObject,
        isNew: isNew
    };
}

这允许部分对象，正如 Greg 指出的那样，这是一个巨大的好处，但也允许 Visual Studio 仍然给我代码提示和 Typescript 以继续。

我希望将来会有更好的方法，或者也许其他人有更好的想法？

我还考虑让 MyComponentState 的所有属性都是可选的；然而，这样做需要在使用这些属性的任何地方进行更多真实性检查。由于确实需要一些属性，因此这条路线也会引入一些编程维护混乱。

【讨论】：