javascript - 使用 redux connect 函数会丢失 IDE 中的类信息 (PhpStorm/WebStorm)

Question

使用 redux 中的 connect 函数似乎使我的 IDE (PhpStorm) 失去了在我的类上“查找用法”的能力。我认为是因为 connect返回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 将其视为我的原始类/组件，因此它具有所有类型信息。

我发现解决此问题的一种方法是使用 @connect 的注释，但这需要我输入 mapStateToProps & mapDispatchToProps函数高于类。我更喜欢让类文件保持相当干净，类位于文件的最顶部。

这给出了 Block-scoped variable 'mapSateToProps' used before its declaration 从 'react-redux' 导入 { connect }

@connect(mapStateToProps)
class TestClass {

}

const mapStateToProps = (state, props) => {

}

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

我正在使用 TypeScript 和 Babel。

Answer 1

您可以将 mapStateToProps 编写为函数，因为使用 function 关键字时，声明为 hoisted

例如

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