Angular 12定义BehaviorSubject时报null与IBasket类型不匹配错误如何解决

报错原因 #

TypeScript 不允许你给声明为IBasket/IBasketTotal类型的参数传入null值。你给BehaviorSubject指定的泛型仅包含对应接口类型，但初始化和删除购物车时都传入了null，因此触发类型校验报错。

可选解决方法 #

方法1：修改泛型允许空值（适合需要标识购物车未加载/不存在状态的场景） #

直接给BehaviorSubject的泛型添加联合类型null，明确允许空值：

// 仅需修改这两行的泛型定义
private basketSource = new BehaviorSubject<IBasket | null>(null);
basket$ = this.basketSource.asObservable();

private basketTotalSource = new BehaviorSubject<IBasketTotal | null>(null);
basketTotal$ = this.basketTotalSource.asObservable();

配套适配：

后续从subject取值时需要做空值判断，避免调用空值的属性报错：

• 订阅basket$/basketTotal$时先判断值是否为null再使用
• getCurrentBasketValue()的返回值会自动变为IBasket | null，在调用basket.items等属性前先判断是否存在

方法2：初始化传默认空实例（无需处理空值，代码更简洁） #

因为你代码中已经定义了Basket类，直接用空实例作为初始值，购物车金额也传初始的0值即可，全程不需要用到null：

// 修改初始化参数，不需要改动泛型
private basketSource = new BehaviorSubject<IBasket>(new Basket());
basket$ = this.basketSource.asObservable();

private basketTotalSource = new BehaviorSubject<IBasketTotal>({ shipping: 0, subTotal: 0, total: 0 });
basketTotal$ = this.basketTotalSource.asObservable();

配套适配：

修改deleteBasket方法中传null的逻辑，替换为默认空值即可：

deleteBasket(basket: IBasket) {
  return this.http.delete(this.baseUrl + "basket?basketId=" + basket.id).subscribe(() => {
    // 替换为默认空值
    this.basketSource.next(new Basket());
    this.basketTotalSource.next({ shipping: 0, subTotal: 0, total: 0 });
    localStorage.removeItem("basket_id");
  }, error => {
    console.log(error);
  });
}

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