The unholy trinity of RxJS, Typescript, and the infamous 'Type Mismatch' error message

Question

The unholy trinity of RxJS, Typescript, and the infamous 'Type Mismatch' error message

It's clear that I'm overlooking something obvious. The pseudo code below works perfectly in production, but my IDE (IntelliJ IDEA) is throwing an error that I can't solve. I can suppress it with

noinspection TypeScriptValidateTypes

, but I really want to understand what's causing it:

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

The error message on the subscribe line states:

Argument type ([authState, returnUrl]: readonly [any, any]) => void is not assignable to parameter type Partial> | undefined

Additional relevant information?

// AuthState is just a plain old JavaScript object.
onAuthStateChanged(): BehaviorSubject<AuthState | undefined>

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

I'm using RxJS ~7.5.0, and Typescript ~4.7.4. My Angular version is ^14.2.0, although this issue doesn't seem specific to Angular.

So, what should happen here? The onAuthStateChanged method emits either an AuthState object or undefined based on the user's login status. This is then combined with the query parameter called returnUrl, which is always a string.

Historically, the syntax used involved destructuring assignment signature ([authState, returnUrl]), and as mentioned, it works fine in practice. It also doesn't throw errors on StackBlitz. But I'm facing issues in IntelliJ...

Could this be related to a breaking change in the latest RxJS version?

withLatestFrom

Generic signatures have changed. Do not explicitly pass generics.

Source: https://rxjs.dev/6-to-7-change-summary#withlatestfrom

Even though it compiles and runs successfully. So, two questions:

What is causing this error in IntelliJ?
How can I resolve it? I've tried strongly typing all parameters without success...

angular typescript intellij-idea rxjs typescript-generics

Answer 1

Answer №1

To keep up with the latest developments, you can monitor the progress of the problem at WEB-57220

Eliminating the error may be possible by activating the Typescript language service under Preferences | Languages & Frameworks | TypeScript

Answer 2

To keep up with the latest developments, you can monitor the progress of the problem at WEB-57220

Eliminating the error may be possible by activating the Typescript language service under Preferences | Languages & Frameworks | TypeScript

Answer 3

Answer №2

Ensuring that onAuthStateChanged is defined either as a function returning a BehaviorSubject, or directly as a BehaviorSubject, will prevent any errors from occurring.

The code snippet provided below demonstrates the absence of any type errors:

type AuthState = {};

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

// This represents Angular's params object.
// Reference: 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]) => {
        // [...]
      });
  }
}

The variables [authState, returnUrl] are correctly identified as type AuthState and any respectively.

For further details, please visit this stackblitz link.

Answer 4

Ensuring that onAuthStateChanged is defined either as a function returning a BehaviorSubject, or directly as a BehaviorSubject, will prevent any errors from occurring.

The code snippet provided below demonstrates the absence of any type errors:

type AuthState = {};

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

// This represents Angular's params object.
// Reference: 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]) => {
        // [...]
      });
  }
}

The variables [authState, returnUrl] are correctly identified as type AuthState and any respectively.

For further details, please visit this stackblitz link.

The unholy trinity of RxJS, Typescript, and the infamous 'Type Mismatch' error message

Answer №1

Answer №2

Similar questions

Error: Yarn is unable to locate the 'logform' module within the 'winston' build

Protractor test stalls when waiting for disabled element using async/await instead of control flow

Encountering an issue while upgrading to Angular 10: Unable to interpret "tsconfig.json" as a valid JSON AST Object

Position the circles in a way that they align along the circumference of a larger

Tips for accessing a specific ListItem within the Menu Component using MUI for React

Angular 6 - Assigning string value to a variable when a click event occurs

TS2339: The function 'slice' is not found on the data type 'WritableSignal<Product[]>'

How to combine and return an observable and a value simultaneously in an Angular service using RxJS

Ways to enhance this directive for displaying a unique error message using mat-error

Is it possible to create a QR Code using Ionic 5?

What is the reason behind using `Partial<>` to enclose the Vue props?

Determining the Best Use of Types Versus Interfaces in TypeScript

How to create line breaks in Angular Material matTooltip elements?

Make the if statement easier - Angular

Using routerLink within an ng-template causes RouterActiveLink to malfunction

Set up and run a SpringBoot + Angular web application on an external IIS server

The first click causes Highchart to display with varying heights

Difficulty in activating or deactivating form controls in Angular 2 upon receiving an HTTP response

What is preventing the availability of those array extensions during runtime?

Is there a way to open an image.png file in typescript using the "rb" mode?