Ways to utilize the scan operator for tallying emitted values from a null observable

Question

Ways to utilize the scan operator for tallying emitted values from a null observable

I'm looking for an observable that will emit a count of how many times void values are emitted.

const subject = new Subject<void>();

subject.pipe(
    scan((acc, curr) => acc + 1, 0)
).subscribe(count => console.log(count));

subject.next(); // should output 1
subject.next(); // should output 2
subject.next(); // should output 3

When trying to implement the above code, I encountered the following compiler error:

   TS2345: Argument of type 'MonoTypeOperatorFunction<number>' is not 
      assignable to parameter of type 'OperatorFunction<void, number>'.
      Types of parameters 'source' and 'source' are incompatible.
      Type 'Observable<void>' is not assignable to type 'Observable<number>'.
      Type 'void' is not assignable to type 'number'.

Although I've gone through my code thoroughly, I still can't seem to resolve this issue. Is there something wrong with my scan() operator or am I missing something?

angular typescript rxjs observable

Answer 1

Answer №1

If you want to resolve the issue at hand, consider specifying parameter types in the function passed to scan like shown below:

subject.pipe(
  scan((acc: number, curr: void) => acc + 1, 0)
).subscribe(count => console.log(count));

The definitions for scan and reduce are in need of some updates. Initially crafted for older versions of TypeScript, with TypeScript 2.8 being the minimum supported version for RxJS 6 now, there is potential for refining these typings.

Answer 2

If you want to resolve the issue at hand, consider specifying parameter types in the function passed to scan like shown below:

subject.pipe(
  scan((acc: number, curr: void) => acc + 1, 0)
).subscribe(count => console.log(count));

The definitions for scan and reduce are in need of some updates. Initially crafted for older versions of TypeScript, with TypeScript 2.8 being the minimum supported version for RxJS 6 now, there is potential for refining these typings.

Answer 3

Answer №2

You may simply employ a tap

const { Subject } = rxjs;
const { tap } = rxjs.operators;

const subject = new Subject();

count = 0;

subject.pipe(
    tap(() => { count++; })
).subscribe(_ => console.log(count));

subject.next(); // should display 1
subject.next(); // should showcase 2
subject.next(); // should demonstrate 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>

Answer 4

You may simply employ a tap

const { Subject } = rxjs;
const { tap } = rxjs.operators;

const subject = new Subject();

count = 0;

subject.pipe(
    tap(() => { count++; })
).subscribe(_ => console.log(count));

subject.next(); // should display 1
subject.next(); // should showcase 2
subject.next(); // should demonstrate 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>

Ways to utilize the scan operator for tallying emitted values from a null observable

Answer №1

Answer №2

Similar questions

Changing the target in tsconfig.json to "es2022" leads to the error message "Property 'xx' is referenced before its initialization.ts(2729)"

Testing units in Angular using different sets of test data

After performing the `ng build --prod` command in Angular 4, deep linking functionality may not

Securing routes and layouts in the MEAN Stack framework

Attempting to publish and install a unique angular2 component using NPM and Angular-CLI results in successful compilation only on the initial try

Ways to resolve the issue of npm being unable to globally install typescript

Issue with Stenciljs custom event not triggering using @Listen decorator

The backend GET request functions properly on Postman, but fails to return any data to the frontend

Execute automated tests using Selenium on an Angular web application using headless Chrome

Retrieve all the items listed in the markdown file under specific headings

Exploring the world of form interactions in Angular: A guide to creating dynamic element communication

Is it possible to capture and generate an AxiosPromise inside a function?

Angular 4: Bringing back localstorage data upon user's backbutton navigation

Issue with Angular 6 subscribe event not being caught by subject?

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

Creating and handling Observable of Observables in RxJS: Best practices

What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

Unable to click on element at specific location

Observable doesn't respond to lazy loaded module subscriptions

Exploring methods to validate a Reactive Form in Angular 10+ by incorporating two groups within the formBuilder.group