使用 redux connect 函数在我的 IDE (PhpStorm/WebStorm) 中丢失 class 信息

Question

使用 redux 的连接功能似乎使我的 IDE (PhpStorm) 在我的 classes 上失去 "Find Usages" 的能力。我假设因为 connect returns any，所以 import SomeClass from SomeClass.ts 丢失了该文件的类型信息。

export default connect(mapStateToProps)(SomeClass);

来自 redux 文档：

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

但我希望我的 IDE 将其视为我的原始 class/component，因此它具有所有类型信息。

我发现解决此问题的一种方法是使用带有 @connect 的注释，但这需要我将 mapStateToProps 和 mapDispatchToProps 函数放在 class 之上。我更喜欢在文件的最顶部使用 class 来保持我的 class 文件相当干净。

这给出了 Block-scoped variable 'mapSateToProps' used before its declaration 从 'react-redux'

导入 { 连接}

@connect(mapStateToProps)
class TestClass {

}

const mapStateToProps = (state, props) => {

}

有没有办法让我使用 connect，在我的 IDE 中保留 class 类型信息，并在 class 下方或内部设置 mapStateToProps class 作为静态函数？或者只是同一文件中的其他任何地方？

我正在使用 TypeScript 和 Babel。

Answer 1

您可以将 mapStateToProps 写成一个函数，因为当使用 function 关键字时，声明是 hoisted

例如

function mapStateToProps(state: TypeOfYourRootStore, props: TypeOfYourComponentsProps) {}