Ich kann nicht scheinen, eine Schnittstelle zu schaffen, um TypeScript zu befriedigen, fehlende Eigenschaft zu erhalten

Question

Ich versuche, eine Schnittstelle herzustellen, TypeScript glücklich zu bilden. ich tue:

@Output() onChange:IMyEvent<ISliderItemData> = new Subject().delay(300).debounceTime(1000) ;// emits ISliderItemData 

aber ich erhalte den folgenden Fehler:

Error:(68, 5) TS2322:Type 'Observable<{}>' is not assignable to type 'IMyEvent<ISliderItemData>'. 
    Property '__isAsync' is missing in type 'Observable<{}>'. 

Ich habe versucht, TS mit dem folgenden Code zu erfüllen, aber es hat nicht funktioniert:

class IMyEvent<T> extends Subject<T> { 
    __isAsync: boolean; 
} 

irgendwelche Ideen?

Answer 1

Ich habe es nicht testen, aber ich würde vermuten, folgende funktionieren könnte:

@Output() onChange:IMyEvent<ISliderItemData> = <IMyEvent<ISliderItemData>>(new Subject().delay(300).debounceTime(1000)) ;

Warum Sie folloowing nicht definieren?

class IMyEvent<T> extends Observable<T> { 
    __isAsync: boolean; 
} 

und dann mit: @Output() onChange:IMyEvent<ISliderItemData> = new IMyEvent<ISliderItemData>().delay(300).debounceTime(1000) ;

Das typisierte Gegenstand schaffen würde (und durch Verzögerung beobachtbare umgewandelt werden() und DebounceTime())

Edit: Ich habe mich verändert Original antwort - Subject zu IMyEvent. Oben - wenn ich den Code und Kommentare sehe - ich glaube, es wäre besser, sauber zu halten Subjectnext() wie Sie benötigen und delay() und debounceTime() auf Verbrauchsseite verwenden können.

Answer 2

So wie @jonrsharpe sagte, können Sie es auf der Gegenseite tun, aber wenn man es bei der Deklaration tun wollen, wird diese Arbeit:

@Output() onChange:Observable<ISliderItemData> = new Subject().delay(300).debounceTime(1000); 

...

und später:

(this.onChange as Subject<ISliderItemData>).next({data}) 

Answer 3

Wie Sie erwähnt,

@Output() onChange:IMyEvent<ISliderItemData> = new Subject().delay(300).debounceTime(1000) ;// emits ISliderItemData 

Sie nehmen einen Betreff und rufen dann den Verzögerungsoperator darauf auf. An diesem Punkt haben Sie kein Subjekt mehr - Sie haben stattdessen ein Observable. Jeder weitere Operator, der daran angekettet ist, wird ebenfalls Observables zurückgeben. Daher ist das Ergebnis Ihres Ausdrucks (d. H. Das Zeug auf der rechten Seite des '=') ein Observable. Daher erwartet Typescript, dass Ihre rechtsgültige Deklaration einen übereinstimmenden Typ aufweist, d. H. Ein Observable.

So ist die einfachste Form dieser wäre:

@Output() onChange: Observable = new Subject().delay(300).debounceTime(1000) ;// emits ISliderItemData 

aber in Ihrem Fall, Sie möchten Ihre onChange Variable geben Sie die beobachtbare aussendet, um anzuzeigen, welche Art. Sie sollten Ihren Betreff auch so eingeben, dass er übereinstimmt.So wird daraus:

@Output() onChange: Observable<ISliderItemData> = new Subject<ISliderItemData>().delay(300).debounceTime(1000) ;// emits ISliderItemData 

Die Realität ist, dass Typoskript ziemlich klug ist Arten über Folgern nach Verbrauch, so dass Sie könnte tatsächlich nutzen:

@Output() onChange = new Subject<ISliderItemData>().delay(300).debounceTime(1000) ;// emits ISliderItemData 

Der Typoskript Compiler wird sehen, dass der Rückgabetyp Ihr Verzögerungsoperator (und der resultierende debounceTime-Operator) ist Observable und weist diesen Typ automatisch Ihrer onChange-Instanzvariablen zu.

Es ist persönliche Präferenz in diesem Fall, ob Sie den Typ auf die onChange-Variable setzen - es wird nicht vom Compiler benötigt, kann aber nützlich sein, um einige Code-Klarheit hinzuzufügen.