RxJS startWith在Angular 4應用程序中生成TypeScript編譯器錯誤

Question

當我使用startWith時，出現RxJS 5的TypeScript編譯器錯誤。但是，如果我將此（初始）值移入scan運算符，則所有編譯和運行都會正常。我找不出錯誤的來源。來自我的Angular 4測試應用程序的示例代碼如下所示。

編譯錯誤：

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. 

樣本模板：（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> 

示例代碼：（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

你」不要使用種子值初始化scan()。 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan

您需要設置這樣的：

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

而且，現在你不需要使用startWith可言。