Flow中构造函数赋值的可选对象如何避免冗余空检查？

Got it，咱们来搞定这个Flow报错的问题——不用加冗余空检查就能解决。核心原因是：当你把myObject初始声明为?MyObject = null后，Flow没办法自动推导到constructor赋值后，render里的this.myObject已经是非空状态。在Flow 0.72.0版本里，有几种更优雅的实现方式：

方案1：移除不必要的null初始值（最优推荐） #

既然你在constructor里一定会给myObject赋值，完全没必要把它声明为可选类型（?MyObject）并初始化为null。直接声明为非可选的MyObject类型，在constructor中赋值即可：

// @flow
type MyObject = { a: number, b: number };

class MyComponent extends Component {
  myObject: MyObject; // 去掉?标记，不再初始化为null

  constructor() {
    super();
    this.myObject = { a: 1, b: 2 };
  }

  render() {
    return <h1>{this.myObject.a}</h1>; // Flow不会再报错
  }
}

如果场景允许，甚至可以直接在类属性初始化时赋值，省去constructor里的操作，代码更简洁：

// @flow
type MyObject = { a: number, b: number };

class MyComponent extends Component {
  myObject: MyObject = { a: 1, b: 2 }; // 直接完成初始化

  render() {
    return <h1>{this.myObject.a}</h1>;
  }
}

这个方案从根源上消除了null的可能性，类型声明更准确，是最推荐的实现方式。

方案2：用类型断言明确标注非空 #

如果因为某些限制必须保留?MyObject的初始声明（比如有其他分支逻辑可能把它设为null，但当前render执行时一定不为空），可以用Flow的类型断言告诉编译器：这个值此时绝对是非空的：

// @flow
type MyObject = { a: number, b: number };

class MyComponent extends Component {
  myObject: ?MyObject = null;

  constructor() {
    super();
    this.myObject = { a: 1, b: 2 };
  }

  render() {
    // 断言this.myObject为MyObject类型，消除Flow报错
    return <h1>{(this.myObject: MyObject).a}</h1>;
  }
}

注意：使用这个方式时，你必须确保render执行时this.myObject确实不为空，否则可能引入运行时错误。

方案3：用类初始化器替代constructor赋值 #

Flow 0.72.0已经支持类属性初始化器，这种写法能让Flow更准确地跟踪类型变化。如果之前是因为兼容性用constructor赋值，换成初始化器后Flow会自动识别赋值后的非空状态：

// @flow
type MyObject = { a: number, b: number };

class MyComponent extends Component {
  myObject: ?MyObject = { a: 1, b: 2 }; // 用初始化器直接覆盖null初始值

  render() {
    return <h1>{this.myObject.a}</h1>; // Flow会正确识别这里的非空状态
  }
}

这种方式适合需要保留?MyObject声明，但实际初始化后不会为null的场景。

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