Angular中FormControl valueChanges报Object is possibly null错误

两个项目的TypeScript严格空值校验配置不一致。
旧项目未开启strictNullChecks校验（或未启用完整TypeScript严格模式套件），TypeScript不会对可能为null/undefined的值做调用校验；高版本Angular新建的项目默认开启全套严格模式，FormGroup.get()方法的返回类型为AbstractControl | null，直接链式调用.valueChanges时，TypeScript就会抛出Object is possibly 'null'.的编译错误。

• 非空断言（推荐，适用于100%确定控件存在的场景）
  如果你在FormGroup初始化时就静态定义了对应控件，不存在动态删除、拼写错误的可能，直接在get()调用后加TypeScript非空断言操作符!，告诉TS这个返回值不可能为null：

  form: FormGroup = new FormGroup({
    s: new FormControl('')
  })
  
  fo$ = this.form.get('s')!.valueChanges.pipe(
    map(a => console.log('something'))
  );
  

• 空值安全守卫（适用于控件可能动态增减的场景）
  如果控件可能在后续逻辑中被新增/移除，用可选链+空值兜底的写法，避免运行时空值报错，注意需要从rxjs导入EMPTY常量做兜底：

  import { EMPTY } from 'rxjs';
  
  // 其余表单初始化代码省略
  fo$ = this.form.get('s')?.valueChanges.pipe(
    map(a => console.log('something'))
  ) ?? EMPTY;
  

• 直接访问controls属性获取控件
  静态定义的表单控件可以直接通过form.controls访问对应实例，绕开get()方法的null返回类型：

  fo$ = (this.form.controls.s as FormControl).valueChanges.pipe(
    map(a => console.log('something'))
  );
  

• 关闭严格空值校验（不推荐）
  如果想要和旧项目保持完全一致的校验行为，可以打开项目根目录的tsconfig.json，将compilerOptions下的strictNullChecks字段设置为false。这种方式会丢失TS对全项目空值的校验能力，很容易把空值问题留到运行时，非必要不选。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker