Angular 7.2升级至8.2后BroadcastService类型不匹配错误修复咨询

问题根源 #

你遇到的TS2740错误是因为rxjs版本更新后类型定义的变化：

• Angular 8对应的rxjs版本中，subscribe()方法的返回值明确为Subscription类型，但你的代码错误地将方法返回类型声明为Subscriber<BroadcastObject>，两者类型不匹配导致报错。
• 另外，EventEmitter是Angular专为组件@Output()事件设计的工具，用它实现全局消息总线不符合Angular最佳实践，这也是后续类型错误的潜在诱因。

解决方案 #

方案1：替换EventEmitter为rxjs Subject（推荐） #

Subject是rxjs专门用于多播消息的工具，更适合组件间通信场景，同时能彻底解决类型问题：

修改后的broadcast.service.ts代码：

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { BroadcastObject } from '../utils/interfaces/OnBroadcast.interface';

/**
 * BroadcastService: 用于在组件间广播类对象消息的简易服务
 */
@Injectable({
  providedIn: 'root'
})
export class BroadcastService {
  // 用Subject替代EventEmitter，明确泛型为BroadcastObject
  private subject: Subject<BroadcastObject>;

  constructor() {
    this.subject = new Subject<BroadcastObject>();
  }

  broadcast(name: string, data: any): void {
    // Subject用next()发射消息，替代EventEmitter的emit()
    this.subject.next({ name, data });
  }

  // 修正返回类型为Subscription，同时明确参数类型
  subscribe(
    next?: (value: BroadcastObject) => void,
    error?: (error: any) => void,
    complete?: () => void
  ): Subscription {
    return this.subject.subscribe(next, error, complete);
  }

  // 可选：添加全局取消订阅方法，避免内存泄漏
  unsubscribeAll(): void {
    this.subject.complete();
  }
}

方案2：仅修复类型错误（不替换EventEmitter） #

如果暂时不想替换EventEmitter，只需修正类型声明即可：

修改后的broadcast.service.ts代码：

import { EventEmitter } from '@angular/core';
import { Injectable } from '@angular/core';
import { Subscription } from 'rxjs'; // 替换Subscriber为Subscription
import { BroadcastObject } from '../utils/interfaces/OnBroadcast.interface';

/**
 * BroadcastService: 用于在组件间广播类对象消息的简易服务
 */
@Injectable({
  providedIn: 'root'
})
export class BroadcastService {
  // 明确EventEmitter的泛型为BroadcastObject
  public subscriber: EventEmitter<BroadcastObject>;
  
  constructor() {
    this.subscriber = new EventEmitter<BroadcastObject>();
  }
  
  broadcast(name: string, data: any) {
    this.subscriber.emit({ name, data });
  }
  
  // 修正返回类型为Subscription，同时明确参数类型
  subscribe(generator: (value: BroadcastObject) => void): Subscription {
    return this.subscriber.subscribe(generator);
  }
}

关键说明 #

• Subscription是rxjs中用于管理订阅生命周期的类型，调用其unsubscribe()方法可取消订阅，避免内存泄漏。
• Subscriber是rxjs内部实现类，不应作为公共方法的返回类型暴露给外部代码。
• 优先选择方案1，因为EventEmitter的设计初衷是组件输出事件，而非全局消息总线，使用Subject能更好地遵循rxjs和Angular的设计规范。

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