javascript - 如何将 Flow 与外部高阶组件包装器一起使用

Question

Flow documentation仅显示如何声明自定义高阶组件以与自定义类及其 Prop 一起使用。就我而言，我有一个自定义类，例如:

type Props = {
  navigation: Object,
  isFocused: boolean
}

type State = {
  config: AppConfig,
  pack: Package,
  init: boolean,
}

class MainAppScreen extends React.Component<Props, State> {
...
}
export default withNavigationFocus(MainAppScreen);

并且想要用“react-navigation”中的外部 HOC 来包装它；

我应该做什么(//$FlowFixMe 旁边)来消除此消息:

错误:(111, 16) 无法为此模块构建类型化接口(interface)。您应该使用类型注释该模块的导出。无法确定此调用表达式的类型。请提供注释，例如，通过围绕该表达式添加类型转换。 (签名验证失败)

谢谢。

更新:
由于@user11307804指出了正确的方向，我也一直在尝试涉及外部库的流类型。然而，似乎仍然不可能为(HOC)函数导入类型，例如:

  declare export function withNavigationFocus<Props: {...}, ComponentType: React$ComponentType<Props>>(
    Component: ComponentType
  ): React$ComponentType<$Diff<React$ElementConfig<ComponentType>, {| isFocused: ?boolean |}>>;

当我尝试像这样导入它时:( following this example )

import type {withNavigationFocus} from 'react-navigation';

我收到错误:

Error:(22, 14) Cannot import the value `withNavigationFocus` as a type. `import type` only works on type exports like type aliases, interfaces, and classes. If you intended to import the type of a value use `import typeof` instead.

如果我尝试使用 typeof 我得到:

import typeof {withNavigationFocus} from 'react-navigation';

我收到错误:

Error:(22, 16) Cannot declare  `withNavigationFocus` [1] because the name is already bound.
Error:(112, 16) Cannot call `withNavigationFocus` because  Named import from module `react-navigation` [1] is not a function.
Error:(112, 16) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression. (`signature-verification-failure`)

谢谢。

Answer 1

Flow 提示 withNavigationFocused是无类型的。幸运的是，flow-typed项目有 react-navigation types 。 (还有不同版本的 react-navigation 或 flow 的其他定义文件；我链接的文件是 react-navigation^4.0.0 和 flow^0.114.0 的。)您可以在项目中包含 Library Definitions documentation 后面的库定义。 (本质上，只需将文件保存在 <PROJECT_ROOT>/flow-typed 目录中)。