RxJS、Typescript 和可怕的“類型不匹配”警告/錯誤

Question

我知道我遺漏了一些明顯的東西。 下面是實際在生產中工作的偽代碼。 但是，IDE（IntelliJ IDEA）給了我一個我無法破解的錯誤。 可以使用noinspection TypeScriptValidateTypes來抑制它，但是，我真正想知道的是發生了什么：

this.authService.onAuthStateChanged()
    .pipe(
        withLatestFrom(
            this.activatedRoute.queryParams.pipe(
                map(params => params['returnUrl'])
            )
        )
    )
    .subscribe(([authState, returnUrl]) => {
        // [...]
    });

我在subscribe線上遇到的錯誤：

參數類型 ([authState, returnUrl]: readonly [any, any]) => void 不可分配給參數類型 Partial<Observer<[(AuthState | undefined), ...unknown[]]>> | 不明確的

其他相關細節？

// AuthState is just a POJO.
onAuthStateChanged(): BehaviorSubject<AuthState | undefined>

// This is Angular's params object.
// https://angular.io/api/router/Params
export declare type Params = {
    [key: string]: any;
};

我正在使用RxJS ~7.5.0和Typescript ~4.7.4 。 我也在使用Angular ^14.2.0 ，盡管這確實不是 Angular 問題。

那么，這里應該發生什么？ onAuthStateChanged發出AuthState或undefined取決於用戶是否登錄。這與一個名為returnUrl的查詢參數相結合，當然它是一個string 。

現在，過去的語法工作方式是使用解構賦值簽名([authState, returnUrl])可以使用兩個可觀察對象——至少我認為這就是它的名稱。 正如我所說，它在現實生活中編譯和執行正確，正如其他人在這里所示， StackBlitz上也不會出錯（更新以更接近地匹配我的環境與相同tslint 、 angular.json等）。

然而，我心愛的 IntelliJ...

會不會是我在看最新版 RxJS 的重大變化：

與最新從

• 通用簽名已更改。 不要明確傳遞 generics。

來源： https://rxjs.dev/6-to-7-change-summary#withlatestfrom

這是偉大的，除了它仍然編譯和運行。 所以，有兩件事：

1. 幕后發生了什么導致 IntelliJ 出現此錯誤？
2. 如何使它遠離 go？ 我試過強烈輸入所有參數，但無濟於事......

Answer 1

如果您將onAuthStateChanged定義為返回BehaviourSubject的 function 或直接定義為BehaviourSubject ，則不應出現任何錯誤。

以下代碼不會產生任何類型錯誤

type AuthState = {};

let onAuthStateChanged = new BehaviorSubject<AuthState | undefined>(null);
let onAuthStateChangedFunc: () => BehaviorSubject<AuthState | undefined>;

// This is Angular's params object.
// https://angular.io/api/router/Params
type Params = {
  [key: string]: any;
};

class Foo {
  constructor(private activatedRoute: ActivatedRoute) {}

  foo() {
    onAuthStateChangedFunc() // or
    // onAuthStateChanged
      .pipe(
        withLatestFrom(
          this.activatedRoute.queryParams.pipe(
            map((params) => params['returnUrl'])
          )
        )
      )
      .subscribe(([authState, returnUrl]) => {
        // [...]
      });
  }
}

變量[authState, returnUrl]分別被正確識別為AuthState和any類型。

請參閱此 stackblitz以供參考

Answer 2

該問題在WEB-57220被跟蹤，請關注它以獲取更新

在設置中啟用 Typescript 語言服務 | 語言和框架 | TypeScript應該有助於擺脫錯誤