展开运算符破坏函数定义中的默认 属性 赋值

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

这只是一个类型。额外的逗号

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