Angular10升级11后takeUntil传Subject<void>报TS2345类型错误的修复

本次TS2345报错的核心原因是rxjs 7.0.0收紧了类型定义规则，配合Angular 11默认开启的严格TypeScript编译配置后，之前rxjs 6版本下完全兼容的Subject<void>作为takeUntil入参的写法，不再匹配takeUntil操作符要求的ObservableInput<any>类型约束，因此在全项目范围内触发批量类型报错。

低改造成本的快速修复 #

仅需调整组件内destroy$的类型标注，不需要修改任何订阅逻辑、ngOnDestroy中的清理逻辑，即可消除报错：

• 从rxjs中补导入ObservableInput类型
• 将原有的destroy$ : Subject<void> = new Subject<void>()声明，仅修改类型标注部分，赋值逻辑保持不变：

  import { Subject, ObservableInput } from 'rxjs';
  // 替换前：destroy$ : Subject<void> = new Subject<void>();
  // 替换后仅调整类型标注
  destroy$: ObservableInput<void> = new Subject<void>();
  

长期适配的规范写法 #

按照rxjs 7的官方类型约束调整destroy$的类型声明，避免后续rxjs小版本升级再次触发同类报错：

• 从rxjs中导入Observable类型
• 将destroy$的类型标注为Observable<void>，实例化逻辑保持不变：

  import { Subject, Observable } from 'rxjs';
  destroy$: Observable<void> = new Subject<void>();
  

  这种写法下，原有pipe(takeUntil(this.destroy$))的订阅逻辑、ngOnDestroy中执行next()/complete()的清理逻辑完全不需要改动，即可100%匹配rxjs7的类型要求。

• 不需要调整单例服务中定义的public toggleMeetingBar = new Subject<any>()，这类带any泛型的全局Subject天然匹配ObservableInput类型约束，和本次报错无关
• 本次类型报错是rxjs7的全局类型兼容问题，和零散出现的Firestore相关类型报错没有关联，优先修完全项目的批量报错后，再单独处理Firestore相关的类型问题即可
• 不建议通过修改tsconfig关闭严格泛型检查的方式绕过报错，这类操作会丢失rxjs全链路的类型校验能力，容易引入不可预期的运行时问题
• 修改完所有组件的类型声明后，重启TypeScript编译服务、重新执行构建命令，全项目的同类TS2345报错即可被清除

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