Error: Observable<any> cannot be converted to type Observable<number> due to a piping issue

Question

Error: Observable<any> cannot be converted to type Observable<number> due to a piping issue

What causes the type error to be thrown when using interval(500) in the code snippet below?

const source = timer(0, 5000);
const example = source.pipe(switchMap(() => interval(500)));
const subscribe = example.subscribe(val => console.log(val));

Visit StackBlits for more details.

The argument 'UnaryFunction<Observable<number>, Observable<number>>' cannot be assigned to the parameter of type 'OperatorFunction'.

The parameters 'source' are not compatible.

Type 'Observable<any>' cannot be assigned to type 'Observable<number>'.

Property 'source' is protected but type 'Observable<T>' is not a subclass of 'Observable<T>'.}

This issue is encountered in the first switchMap example from learnrxjs.io.

typescript rxjs observable

Answer 1

Answer №1

The main challenge lies in the fact that the timer function is set to emit number values, causing source to also expect number emissions. However, the usage of switchMap does not place constraints on the type of values emitted by the resulting observable (hence the use of any). Consequently, your source transitions from emitting solely numbers to emitting any type of value.

To resolve this issue, a straightforward solution would be:

import { timer, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// immediately emit and then every 5 seconds
const source = <any>timer(0, 5000); // designating source to potentially emit any type of values
// switch to a new inner observable upon source emission and emit the items produced by that observable
const example = source.pipe(switchMap(() => interval(500)));
// expected output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9...0, 1, 2, 3, 4, 5, 6, 7, 8
const subscribe = example.subscribe(value => console.log(value));

Answer 2

The main challenge lies in the fact that the timer function is set to emit number values, causing source to also expect number emissions. However, the usage of switchMap does not place constraints on the type of values emitted by the resulting observable (hence the use of any). Consequently, your source transitions from emitting solely numbers to emitting any type of value.

To resolve this issue, a straightforward solution would be:

import { timer, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// immediately emit and then every 5 seconds
const source = <any>timer(0, 5000); // designating source to potentially emit any type of values
// switch to a new inner observable upon source emission and emit the items produced by that observable
const example = source.pipe(switchMap(() => interval(500)));
// expected output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9...0, 1, 2, 3, 4, 5, 6, 7, 8
const subscribe = example.subscribe(value => console.log(value));

Error: Observable<any> cannot be converted to type Observable<number> due to a piping issue

Answer №1

Similar questions

Tips for converting necessary constructor choices into discretionary ones after they have been designated by the MyClass.defaults(options) method

Is it possible to compile using Angular sources while in Ivy's partial compilation mode?

Why isn't my Next.js middleware working properly with TypeScript?

What is the best way to assign default values when destructuring interfaces within interfaces in TypeScript?

TypeScript: Extending a Generic Type with a Class

The issue arose as a result of a SQLITE_ERROR, specifically mentioning that the Users table does not exist. However, the model has been

Can a universal type be designed for application across various types?

Angular - passing information to a nested component

Are there any other methods besides @ViewChild to access template elements by template ID in Angular v4.3.3?

Received an error while using Mongoose 6 $group with Typescript stating that the property '_id' is not compatible with the index signature

What is the best way to integrate Nextjs Link Component with framer motion in a Typescript environment?

How do I manage 'for' loops in TypeScript while using the 'import * as' syntax?

Using Typescript: invoking static functions within a constructor

Utilizing several data sources within a single mat-table

Transferring information via Segments in Ionic 3

Utilizing Pipes within a Method in Angular 2 along with Dependency Injection triggers an "Insufficient Number of Arguments" error

gather and handle data from the shared interface between different parts

When utilizing Ionic Firebase, the user profile saved in the sidemenu is stored using the Events class. However, the saved profile disappears as soon as

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

Prevent HTTP using AsyncValidator when the value is empty