javascript - 扩展运算符破坏了函数定义中的默认属性分配

Question

参见https://flow.org/try/#0PTAEAEDMBsHsHcBQAXAngBwKagAoCdZ0BnUAXlAG9FRQBjaAQyKIDkGBbTAfgC5QjkeAJYA7AOYAaanQAWmWgGtMAE16gARrFjRMDEVJoBtAcPEBdPidGTEAXwDciRLVgiBoAMJzFmgB5lQAAoqGnomVg5scgByX2iDWXklZQDIBmgiTASAOlz0AmIpWz58QiIASjIAPkppFzdtTGy4MUDovEwRZUw8RJ9YOPLHW0QgA

// @flow
type Props = {
  className?: string,
  checked?: boolean,
  [string]: string,
};

const Checkbox = ({
  className = 'x',
  checked = false,
  ...props,
}: Props) => {
  console.log('render checkbox');
}

产生错误:

9:   className = 'x',
               ^ Unexpected token =
10:   checked = false,
              ^ Unexpected token =
12: }: Props) => {
              ^ Unexpected token =>

这是有效的 JavaScript，但被流程拒绝。删除 ...props 可以消除错误，但我需要此功能。我做错了什么还是这是流程中的错误？

Answer 1

这只是一个 type-o。多余的逗号

// @flow
type Props = {
  className?: string,
  checked?: boolean,
  [string]: string,
};

const Checkbox = ({
  className = 'x',
  checked = false,
  ...props
}: Props) => {
  console.log('render checkbox');
}

https://flow.org/try/#0PTAEAEDMBsHsHcBQAXAngBwKagAoCdZ0BnUAXlAG9FRQBjaAQyKIDkGBbTAfgC5QjkeAJYA7AOYAaanQAWmWgGtMAE16gARrFjRMDEVJoBtAcPEBdPidGTEAXwDciRLVgiBoAMJzFmgB5lQAAoqGnomVg5scgByX2iDWXklZQDIBmgiTASAOlz0AmI7PnxCIgBKMgA+SmkXN21MbLgxQOi8TBFlTDxEn1g4ssdbRCA

此外，您应该在类型的顶部定义索引器，如下所示:

// @flow
type Props = {
  [string]: string,
  className?: string,
  checked?: boolean
};