传播运算符破坏函数定义中的默认属性分配

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

这只是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
};