Angular 9升级至Angular 11后Observable初始化报错如何修改代码

这个报错是Angular 11默认启用了TypeScript的strictPropertyInitialization（严格属性初始化）检查规则导致的，该规则要求类的所有属性必须在声明时完成初始化，或者在构造函数内部被赋值，你原来只声明类型不赋值的写法不符合该规则要求。

你可以根据实际业务场景选择以下任意一种方案调整：

• 方案1：声明时直接初始化
  如果你可以确定属性的初始值，直接在声明时赋值即可，示例：

  import { of, Observable } from 'rxjs';
  
  export class CreateEntityComponent implements OnInit {
    // 初始化为发射0值的Observable，符合上传进度初始为0的业务逻辑
    uploadPercent: Observable<number> = of(0);
  
    constructor() {  }
  
    ngOnInit() {
      // 后续业务逻辑中可以重新给uploadPercent赋值为实际的上传进度Observable
    }
  }
  

• 方案2：添加明确赋值断言
  如果你确定该属性会在构造函数之外的逻辑（比如ngOnInit、上传触发方法）中被赋值，永远不会出现未定义的情况，可以在属性名后加!告诉TypeScript你保证该属性一定会被赋值，跳过检查：

  import { Observable } from 'rxjs';
  
  export class CreateEntityComponent implements OnInit {
    // ! 为明确赋值断言，告知TS无需检查该属性的初始化时机
    uploadPercent!: Observable<number>;
  
    constructor() {  }
  
    ngOnInit() {
      // 你的业务逻辑中正常给uploadPercent赋值即可
    }
  }
  

• 方案3：设置为可选属性
  如果该属性确实可能存在未赋值的情况，可以声明为可选类型：

  import { Observable } from 'rxjs';
  
  export class CreateEntityComponent implements OnInit {
    // ? 标识该属性为可选类型，默认值为undefined
    uploadPercent?: Observable<number>;
  
    constructor() {  }
  
    ngOnInit() {
      // 后续调用该属性时需要用可选链操作符避免报错，例如：this.uploadPercent?.subscribe(...)
    }
  }
  

• 方案4（不推荐）：关闭严格属性初始化检查
  如果你不想调整代码，可以在项目根目录的tsconfig.json中修改配置关闭该规则，但会失去类型检查保护，不建议使用：

  {
    "compilerOptions": {
      // 新增或修改该项为false
      "strictPropertyInitialization": false
    }
  }
  

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