Type 'void'不可赋值给'Observable<any>'，如何修复BehaviorSubject传值报错？

问题核心原因 #

• BehaviorSubject.next() 方法的返回值是 void 类型，但是你的 postSleepDuration 方法声明的返回类型是 Observable<any | HttpErrorResponse>，类型不匹配直接触发TS报错
• 你当前给 sleepResponse 传递的是 of(accounts)/throwError(error) 这类Observable包装对象，而不是实际的响应数据，不符合你初始化时给BehaviorSubject定义的泛型逻辑
• 代码存在变量名笔误：类属性定义的是 sleepResponse，你调用时写的是 sleepReponse（少了一个s）

修复方案 #

你需要先给BehaviorSubject推送值，再返回对应类型的Observable，不要直接return next的结果。如果需要把线上接口的返回值也同步给BehaviorSubject，可以通过tap操作符实现。

修复后完整代码 #

import { BehaviorSubject, Observable, of, throwError, tap } from 'rxjs';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

export class SleepService {
    private endpoint = '';
    // 后续可以把any替换为实际的接口返回interface，更符合TS类型规范
    private sleepResponse = new BehaviorSubject<any>({});
    currentResponse = this.sleepResponse.asObservable();
  
    constructor(private http: HttpClient) { }

    public postSleepDuration(score: string, forceResponse?: boolean, errorCode?: number): Observable<any | HttpErrorResponse> {
        if (forceResponse === undefined) {
            return this.http.post<any>(this.endpoint, score).pipe(
                // 不需要同步接口返回值到BehaviorSubject的话可以删掉这行tap
                tap(res => this.sleepResponse.next(res))
            );
        } else {
            const accounts = RESULTS_MOCK;
            const error = mockError(errorCode, this.endpoint);
            if (!!forceResponse) {
                // 先推送实际值到BehaviorSubject，再返回符合要求的Observable
                this.sleepResponse.next(accounts);
                return of(accounts);
            } else {
                // 需要把错误也同步给BehaviorSubject的话可以加对应next逻辑
                return throwError(() => error);
            }
        }
    }
}

const RESULTS_MOCK: any = {
    count: 1,
    next: null,
    previous: null,
    status: 200,
    results: [
        {
            id: "1",
            name: "Asleep and In bed results"
        }
    ]
}

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