Flow 不允许匹配更严格版本的对象答案

【问题标题】：Flow doesn't allow object that matches a stricter versionFlow 不允许匹配更严格版本的对象
【发布时间】：2019-03-05 22:19:29
【问题描述】：

考虑以下 (live link)：

type Range = { min: ?(number | string), max: ?(number | string) }
const myFn = (range: Range) => console.log(range)

type NumberRange = { min: ?number, max: ?number }
const aRange: NumberRange = { min: 0, max: 100 }
myFn(aRange)

流量抱怨：

无法调用 aRange 绑定到 range 的 myFn，因为数字 [1] 与属性 max 中的字符串 [2] 不兼容。

无法调用aRange 绑定到range 的myFn，因为数字[1] 与属性min 中的字符串[2] 不兼容。

在我看来NumberRange 本质上是Range 的一个子集，所以Flow 应该可以很好地使用这种用法。有什么诀窍可以使这项工作发挥作用吗？

【问题讨论】：

标签： javascript types flowtype

【解决方案1】：

问题是对象是可变的，所以myFn 可以做range.min = "foo"; range.max = "bar"; 并且它会被Range 类型所允许，但是aRange 将是带有字符串的NumberRange！

如果您通过在属性名称前添加“+”来使 Range 的属性成为协变的，则表示不允许 myFn 改变这些属性：

type Range = { +min: ?(number | string), +max: ?(number | string) }

Try Flow

【讨论】：

【解决方案2】：

如果您不打算混合使用 min 和 max 的类型，则可以将 Range 改为联合类型。

type NumberRange = { min: ?number, max: ?number }
type StringRange = { min: ?string, max: ?string }

type Range = NumberRange | StringRange
const myFn = (range: Range) => console.log(range)

const aRange: NumberRange = { min: 0, max: 100 }
myFn(aRange)

【讨论】：