angular - 我怎样才能让 typescript 相信可以在 Subject 上调用 Observable 运算符？

Question

示例代码，使用 Angular 4.1.3、rxjs 5.3.0、typescript 2.2.2:

import { Subject } from 'rxjs'

export class Example {
  public response$: Subject<boolean>;

  public confirm(prompt: string): Subject<boolean> {
    // ...set up a confirmation dialog...
    this.response$ = new Subject<boolean>();
    return this.response$.first();
  }
}

当我尝试编译这段代码时，typescript 提示最后一行:

The 'this' context of type 'Subject<boolean>' is not assignable to method's 'this' of type 'Observable<boolean>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<boolean, R>) => Observable<boolean>' is not assignable to type '<R>(operator: Operator<boolean, R>) => Observable<R>'.
  Type 'Observable<boolean>' is not assignable to type 'Observable<R>'.
    Type 'boolean' is not assignable to type 'R'.

我的感觉是，这表示 first()是Observable的一个方法，不是Subject的方法，但是我的理解是Subject也是一个Observable，所以这个应该问题不大。而且，事实上，如果我忽略错误，代码会编译并运行良好。

我尝试过的事情:

1. 导入 first 的各种方式运算符显式，例如import 'rxjs/add/operator/first' .这不会更改错误。
2. 在调用之前将 Subject 转换为 Observable first() ，例如return (this.response$ as Observable<boolean>).first(); .这导致了一个不同但相似的错误，这对我来说也是不正确的:Type 'Observable<boolean>' is not assignable to type 'Subject<boolean>'. Property 'observers' is missing in type 'Observable<boolean>'.

我怎样才能让 typescript 相信调用 first() 是有效的？在一个主题上？

为了回应下面对返回类型的讨论而澄清:该方法也可能有一个不正确的返回类型(应该是 Observable 而不是 Subject)，但这似乎是一个单独的问题；更改返回类型并不能解决上述错误。证实这一点的进一步细节是，当 vscode 突出显示错误时，它仅突出显示 this.response$。 ，不是整条回车线，提示问题在this.response$之间和 first() , 不在 first() 之间和函数的签名:

Answer 1

您对 Subject 也是 Observable 的理解是正确的，但在一定程度上 Subject 也可以用作 Observable。但这并不能构成 Subject一个Observable反之亦然。

按照 ggradnig 的建议，您应该更改 confirm 的返回类型功能Observable<boolean>而不是 Subject<boolean>自 first Subject<boolean> 上的方法会返回 Observable<boolean>

import { Subject } from 'rxjs'

export class Example {
  public response$: Subject < boolean > ;

  public confirm(prompt: string): Observable<boolean> {
    // ...set up a confirmation dialog...
    this.response$ = new Subject < boolean > ();
    return this.response$.first();
  }
}