如何为自带属性增强组件的高阶组件（HOC）添加Flow类型？

我最近在尝试用Recompose的HOC工具，配合Flow类型系统给高阶组件（HOC）添加准确的类型注解，过程中遇到了类型匹配的问题，先贴出我的代码（原代码截断的部分我做了合理补全）：

// @flow
import React from 'react';
import { compose, defaultProps, withProps, type HOC } from 'recompose';

type InnerProps = { 
  text: string, 
  num: number, 
};
type EnhancedComponentProps = { 
  text: string, 
};

const baseComponent = ({ text, num }: InnerProps) => (
 <div>
   {text} {num}
 </div>
);

// 这里的类型标注是我不确定的地方
const enhance: HOC<*, EnhancedComponentProps> = compose(
 defaultProps({ num: 0 }),
 // 或者用withProps生成num，比如根据text长度
 // withProps(({ text }) => ({ num: text.length }))
);

const EnhancedComponent = enhance(baseComponent);

问题分析与正确的类型注解 #

Recompose的HOC<InProps, OutProps>类型其实是一个明确的函数类型：它接收一个需要InProps的组件作为参数，返回一个只需要OutProps的组件。原代码里用HOC<*, EnhancedComponentProps>太宽泛，会丢失类型检查的意义。

针对这个场景，正确的类型标注应该这样写：

// 明确指定：接收需要InnerProps的组件，返回只需要EnhancedComponentProps的组件
const enhance: HOC<InnerProps, EnhancedComponentProps> = compose(
 defaultProps({ num: 0 }),
);

关键点说明 #

• InnerProps是基础组件baseComponent需要的完整props，EnhancedComponentProps是增强后对外暴露的props（外部组件只需要传这部分）。
• 如果用withProps来动态生成num（比如根据text的长度），Flow会自动推导props的依赖关系，但显式标注HOC类型能让代码更清晰，类型检查更严格。
• 注意defaultProps里的属性要和InnerProps的字段匹配：如果num在InnerProps里是必填的，defaultProps会把它转为可选，这样外部组件就无需传入num了。

内容的提问来源于stack exchange，提问作者Fez Vrasta