条件对象的流类型问题属性

Question

我遇到了这个流程问题string [1] is not an object，代码如下：

type User = {
  name: string,
  age: number,
  gender?: string,
}

const user: User = {
  name: 'xxx',
  age: 23,
  ...(props.gender && { gender: props.gender })   // <----- the culprit is this line
}

你知道为什么吗？
对象剩余展开运算符似乎不正确支持有条件地设置键。

我解决了这个问题：

const user: User = {
  name: 'xxx',
  age: 23,
}
if (props.gender) {
  user.gender = props.gender
}

但我不想失去基于流类型的语言功能。

Answer 1

通读这篇 Github issue on object rest spread operator 我找到了更好的解决方法。这是默认为空对象。

所以我更改了这一行：

...(props.gender && { gender: props.gender })

和

...((props.gender && { gender: props.gender }) || {})

现在流程错误已解决。

Answer 2

Flow 在此处捕获您的代码中的合法类型错误错误。如果 gender 是空字符串，则您的代码等同于

const user: User = {
  name: 'xxx',
  age: 23,
  ...""
};

这虽然不是运行时错误，但绝对是一个奇怪的类型错误。您应该只在对象上使用对象传播语法。

此处最好的解决方法是像您所做的那样在之后分配属性，或者

...(props.gender ? { gender: props.gender } : null)

清楚地表明 "if gender is falsy, don't spread any properties"。您也可以使用 {} 而不是 null，但这只会无缘无故地创建一个额外的对象。

条件对象的流类型问题属性

Flow typing issue on conditional object property

javascript

typescript

object

ecmascript-6

flowtype

条件对象的流类型问题 属性

Flow typing issue on conditional object property

javascript

typescript

object

ecmascript-6

flowtype

条件对象的流类型问题属性