Question

请考虑以下（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)

Flow抱怨：

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

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

在我看来myFn本质上是aRange的子集，因此使用这种用法Flow应该没问题。有一个技巧可以使这项工作成功吗？

Answer 1

如果您不打算混合使用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)

Answer 2

问题在于对象是易变的，因此myFn可以range.min = "foo"; range.max = "bar";进行操作，而Range类型则允许，但是aRange将是{{ 1}}和字符串！

如果通过在属性名称前添加“ +”来使NumberRange的属性协变，则表示Range不允许对这些属性进行突变：

myFn

Try Flow

流不允许匹配更严格版本的对象

2 个答案: