如何在 flowjs 中描述通用组件导出的类型

Question

我将代码升级到类型优先，并坚持需要通过 flowjs 注释显式声明通用反应组件的类型

// @flow
import * as React from 'react';
 
type P<TArg> = {
    items: TArg[],
    onSelect: (props: TArg) => void
}

type Item = {
    key: string
}

class Autocomplete<TElem: Item> extends React.Component<P<TElem>> {

}

//its external function provided via import, i put it here for simplicity
function woodoo<F>(v: F): F {
    return v
}

如果我尝试导出调用函数的结果：

export default woodoo(Autocomplete)

我会得到以下错误：

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

如果我尝试通过组件导出它：

export default (woodoo(Autocomplete): Autocomplete)

我会得到以下错误：

如果没有 1 个类型参数，则无法使用 Autocomplete [1]。Flow(missing-type-arg)

我知道出口应该更像

export default (woodoo(Autocomplete): React$ComponentType<????>)

但不知道应该在角衬里放什么来实现正确的打字。

使组件协变而不是泛型是无效的，因为在onSelect 函数中传递的期望值与通过items 属性提供的期望值完全相同，并且使用协方差不会产生与使用泛型相同的严格级别会的。

Answer 1

你试过了吗？

export default (woodoo(Autocomplete): typeof Autocomplete);

我通过使用快速修复功能使用 vscode 直接得到了这个答案

Answer 2

最简单的方法是悬停组件，检查它的类型，然后在导出处填充。

你可以试试：

export default (woodoo(Autocomplete): React.Element<typeof Autocomplete>)