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

당신 ' seed 값으로 scan()을 초기화하지 마십시오. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan

는이처럼 설정해야합니다

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

는 또한, 지금은 전혀 startWith를 사용할 필요가 없습니다.