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

Question

Flow documentation 仅展示了如何声明自定义高阶组件以使用自定义类及其道具。就我而言，我有一个自定义类，例如：

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) 无法为此模块构建类型化接口。您应该使用类型注释此模块的导出。无法确定此调用表达式的类型。请提供注释，例如，通过在此表达式周围添加类型转换。 (signature-verification-failure)

谢谢。

更新：
正如@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 目录中）。