字符串与数字不兼容（默认情况下，Flow输入可选属性）

Question

给出以下伪React组件：

type Props = {
  width?: number | string
};

const Component = ({
  width = '100%'
}: Props) => ( /* component body */ )

Flow引发以下错误：

6:   width = '100%'
     ^ string [1] is incompatible with number [2].
   References:
   2:   width?: number | string
                         ^ [1]
   2:   width?: number | string
                ^ [2]

6:   width = '100%'
             ^ string [1] is incompatible with number [2].
   References:
   6:   width = '100%'
                ^ [1]
   2:   width?: number | string
                ^ [2]

该组件应为width接受3种可能的类型：void | number | string。有没有正确的方法来输入？我可以通过删除默认值'100%'来解决此错误，但是这种解决方法不太习惯。

Answer 1

有一个known bug in Flow，当函数具有类型为并集的参数的默认参数时，会导致报告错误的类型错误。

您可以这样解决：

const Component = ({ width }: Props) => ( /* component body */ )

Component.defaultProps = {
    width: '100%',
}