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

Question

see 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删除错误，但我需要这个功能。我做错了什么还是这是流程中的错误？

标签： javascriptecmascript-6flowtype

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
};