javascript - 流提示对象默认值解构中的不兼容类型

Question

我有一个非常简单的函数，我正在尝试使用 Flow 进行验证:

// @flow
type Props = {
  width: string | number,
};

function fun({
  width = '30em',
}: Props) {
  return width;
}

问题是我得到这个错误:

8:   width = '30em',
     ^ number. This type is incompatible with
8:   width = '30em',
     ^ string
8:   width = '30em',
     ^ string. This type is incompatible with
8:   width = '30em',
     ^ number
8:   width = '30em',
             ^ string. This type is incompatible with
8:   width = '30em',
     ^ number

我想知道我做错了什么......这种其他方式工作正常:

// @flow
type Props = {
  width: string | number,
};

function fun(props: Props) {
  const {
    width = '30em',
  } = props;
  return width;
}

函数参数中的这种语法似乎受到支持，因为:

// @flow
type Props = {
  width: string,
};

function fun({ width = '30em' }: Props) {
  return width;
}

这很好用。

想法？

Answer 1

Destructuring default assignment is not supported in Flow.

与其同时分配默认值和解构，不如单独定义 defaultProps，然后将它们用作默认值。

例如:

type Props = {
    width: string | number
}

const defaultProps: Props = {
    width: '30em',
}

function fun ({ width }: Props = defaultProps) {
  return width
}

fun({ width: 30 })   // => 30
fun({ width: '30' }) // => '30'
fun()                // => '30em'

fun({ width: true }) // $ExpectError

这是一个working example .