RxJS startWith generates a TypeScript compiler error in Angular 4 app

Question

I am getting a TypeScript compiler error with RxJS 5 when I use startWith. However if I move this (initial) value into the scan operator everything compiles and run fine.

I can't figure out the source of the error. Sample code from my Angular 4 test app shown below.

Compile error:

rxjs-counter: master$ ng s                                                                                                      
** NG Live Development Server is running on http://localhost:4200 **                                                            
Hash: ef256d342c83fd7c92a6                                                                                                      
Time: 15133ms                                                                                                                   
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 165 kB {4} [initial] [rendered]                           
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.48 kB {3} [initial] [rendered]                                         
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]                                   
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.98 MB [initial] [rendered]                                       
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]                                         

ERROR in /home/yadav/dev/javascript/rxjs-counter/src/app/app.component.ts (46,19): Argument of type '{ count: number; }' is not 
assignable to parameter of type 'IScheduler | ((v: CounterData) => { count: number; })'.                                        
  Object literal may only specify known properties, and 'count' does not exist in type 'IScheduler | ((v: CounterData) => { coun
t: number; })'.                                                                                                                 
webpack: Failed to compile. 

Sample template: (app.component.html)

<h1>
  {{title}}
</h1>
<div>{{count}}</div>
<div>
  <button (click)="onStart()">Start</button>
  <button (click)="onStop()">Stop</button>
  <button (click)="onReset()">Reset</button>
</div>

Sample code: (app.component.ts)

import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';

interface CounterData {
  count: number;
}

interface CounterFunc {
  (arg: CounterData);
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Reactive Counter';
  count = 0;

  // Observable (streams)
  start$: Subject<number>;
  stop$: Subject<number>;
  reset$: Subject<number>;

  counter$: Observable<CounterData>;
  intervalUntil$: Observable<number>;

  constructor() {
    this.start$ = new Subject();
    this.stop$ = new Subject();
    this.reset$ = new Subject();

    // Observable that cancels on a stream.
    this.intervalUntil$ = Observable
      .interval(500)
      .takeUntil(this.stop$);

    // Notice that takeUntil is on the inner Observable, putting it on the outer Observable
    // would kill the entire Observable chain, and we would need to re-subscribe on it again.
    this.counter$ = this.start$
      .switchMapTo(Observable.merge(
          this.intervalUntil$.mapTo(this.incCount),
          this.reset$.mapTo(this.resetCount)
      ))
      .startWith({count: 0})
      .scan((acc: CounterData, curr: CounterFunc) => curr(acc));

    // Assign observer to cancelable interval stream.
    this.counter$
      .subscribe((v: CounterData) => {
        this.count = v.count;
        console.log(v);
      });
  }

  resetCount(v: CounterData) {
    return {count: 0};
  }

  incCount(v: CounterData) {
    return {count: v.count + 1};
  }

  onStart() {
    this.start$.next();
  }

  onStop() {
    this.stop$.next();
  }

  onReset() {
    this.reset$.next();
  }

}

Answer 1

You're not initializing scan() with a seed value. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan

You need to set it like this:

.scan((acc: CounterData, curr: CounterFunc) => curr(acc), {count: 0});

Also, now you don't need to use startWith at all.