Flow无法识别React组件defaultProps的问题求助

嘿，我之前也碰到过Flow识别不了React组件defaultProps的糟心问题！给你几个亲测有效的解决方案试试：

1. 给defaultProps也配上精确类型 #

你用了精确对象类型{| |}定义PropsType，那记得给defaultProps也定义对应的精确类型，这样Flow就能正确推断出可选属性已经被默认值填充了：

type PropsType = {| size?: 'small' | 'big' |};

class Letter extends PureComponent<PropsType> {
  static defaultProps: {| size: 'small' |} = { size: 'small' };

  render() {
    // 现在Flow应该能识别this.props.size是必选的了
    return <div className={`letter--${this.props.size}`} />;
  }
}

2. 把Props拆成必填和带默认值的两组 #

更清晰的方式是把props分成必填项和带默认值的项，再组合起来，这样类型关系对Flow来说更明确：

// 没有默认值的必填props（如果有的话）
type RequiredProps = {| /* 这里填你的必填属性 */ |};
// 带默认值的props（这里标记为必填）
type DefaultedProps = {| size: 'small' | 'big' |};
// 组合成最终的Props类型，让带默认值的属性变成可选
type PropsType = RequiredProps & $Shape<DefaultedProps>;

class Letter extends PureComponent<PropsType> {
  static defaultProps: DefaultedProps = { size: 'small' };

  render() {
    const { size } = this.props;
    // size现在会被正确推断为'small' | 'big'
    return <div>{size}</div>;
  }
}

3. 升级Flow到新版本 #

旧版本的Flow对React defaultProps的支持本来就不太完善，尤其是精确类型的情况。如果你的Flow版本比较老，升级到最新稳定版可能不用改代码就能解决问题。

4. 显式断言属性类型（最后的办法） #

如果上面的方法都不行，你可以在组件内部明确告诉Flow这个属性不是可选的：

render() {
  const size = ((this.props.size: any): 'small' | 'big');
  return <div>{size}</div>;
}

这算是个小技巧，虽然有点hack，但紧急情况下能用。

内容的提问来源于stack exchange，提问作者Made in Moon