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

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%',
}