Angular 12中BehaviorSubject初始化及next传null报错如何解决？

报错原因说明 #

• 两处报错均和Angular 12.2.1版本无直接关联，是TypeScript严格空值校验规则触发的类型不匹配问题

第一处报错修复 #

报错代码：this.usuarioSubject = new BehaviorSubject<Usuario>(JSON.parse(localStorage.getItem('user')));
错误提示：Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'

• 问题根源：localStorage.getItem()的返回类型是string | null，当本地无对应存储项时会返回null，不符合JSON.parse()要求入参为string的类型规则
• 修复方案：使用空值合并运算符??给返回值兜底，保证入参始终为string类型
  示例代码：

  // 兜底为序列化后的默认Usuario实例，可根据业务需求调整兜底内容
  this.usuarioSubject = new BehaviorSubject<Usuario>(
    JSON.parse(localStorage.getItem('user') ?? JSON.stringify({} as Usuario))
  );
  

第二处报错修复 #

报错代码：this.usuarioSubject.next(null);

• 问题根源：定义BehaviorSubject时泛型指定为<Usuario>，仅允许传递Usuario类型的值，null不符合类型要求
• 修复方案（二选一即可）：
  1. 业务允许用户状态为空的场景：调整泛型为联合类型，允许值为null

     // 定义时调整泛型
     this.usuarioSubject = new BehaviorSubject<Usuario | null>(
       JSON.parse(localStorage.getItem('user') ?? 'null')
     );
     // 此时传null不再报错
     this.usuarioSubject.next(null);
     

  2. 业务不允许用户状态为空的场景：传递默认Usuario实例代替null

     // 提前定义默认用户实例
     const DEFAULT_USER: Usuario = {
       id: 0,
       username: '',
       // 补充你Usuario类型的所有必填字段默认值
     };
     // 初始化时兜底为默认用户
     this.usuarioSubject = new BehaviorSubject<Usuario>(
       JSON.parse(localStorage.getItem('user') ?? JSON.stringify(DEFAULT_USER))
     );
     // 重置时传默认用户
     this.usuarioSubject.next(DEFAULT_USER);
     

临时绕开方案（不推荐） #

如果仅需要临时跳过类型校验，可使用类型断言强制匹配类型：

// 第一处报错修复
this.usuarioSubject = new BehaviorSubject<Usuario>(JSON.parse(localStorage.getItem('user') as string));
// 第二处报错修复
this.usuarioSubject.next(null as unknown as Usuario);

注：该方案会丢失TypeScript的类型校验能力，可能引发运行时异常，非特殊场景不建议使用

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