Flow深度子类型赋值报错咨询：浅层次可行深层为何出错？

这个问题其实涉及到Flow对对象可变性的核心假设，咱们一步步拆解来理解：

1. 浅层对象赋值可行的原因 #

当你处理顶层对象的子类型时，Flow允许“宽化”赋值——也就是把属性更多的对象赋值给属性更少的类型变量。比如这个案例：

// @flow
type ObjectA = { foo: string };
type ObjectB = { foo: string, bar: number };
let objectB: ObjectB = { foo: 'test', bar: 42 };
let objectA: ObjectA = objectB;
// 可正常运行！

原因很简单：objectA只能访问foo属性，objectB自带的bar属性不会被objectA触及，也就不会破坏类型安全。Flow知道你不会通过objectA去操作那些额外属性，所以允许这种赋值。

2. 深层嵌套报错的核心原因 #

问题出在嵌套对象的可变性假设上。Flow默认认为所有对象都是可变的，咱们看深层案例的隐患：

// @flow
type ObjectA = { foo: { bar: string } };
type ObjectB = { foo: { bar: string, baz: string } };
let objectB: ObjectB = { foo: { bar: '123', baz: '456' } };
let objectA: ObjectA = objectB;
// 报错！

如果Flow允许这个赋值，后续你可能会写出这样的代码：

objectA.foo = { bar: "updated" };

这时候objectB.foo就被替换成了一个没有baz属性的对象，但objectB的类型明确要求foo必须包含baz，这就直接违反了类型约束，破坏了类型安全。所以Flow会提前报错阻止这种潜在风险。

3. 解决方法：标记嵌套对象为只读 #

如果你确定不会修改嵌套的对象，可以用$ReadOnly修饰符告诉Flow这个对象是不可变的，这样就能正常赋值了：

// @flow
type ObjectA = { foo: $ReadOnly<{ bar: string }> };
type ObjectB = { foo: { bar: string, baz: string } };
let objectB: ObjectB = { foo: { bar: '123', baz: '456' } };
let objectA: ObjectA = objectB;
// 现在正常运行！

$ReadOnly会限制你通过objectA.foo修改或替换这个嵌套对象，消除了破坏objectB类型的风险，Flow也就允许这种赋值了。

内容的提问来源于stack exchange，提问作者nariel0822