似乎無法創建一個接口來滿足TypeScript缺少屬性

Question

我試圖創建一個使TypeScript滿意的接口。 我在做：

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

但出現以下錯誤：

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

我嘗試使用以下代碼滿足TS，但無法正常工作：

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

有任何想法嗎？

Answer 1

我沒有對其進行測試，但我想以下可能有效：

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

為什么不定義追隨者？

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

然后使用： @Output() onChange:IMyEvent<ISliderItemData> = new IMyEvent<ISliderItemData>().delay(300).debounceTime(1000) ;

這將創建類型化的Subject（並通過delay（）和debounceTime（）轉換為Observable）

編輯：我已經改變了原來的答案- Subject對IMyEvent 。 在上面-如果我看到代碼和注釋-我相信這將是更好的保持清潔Subject要能夠調用next() ，因為你需要和使用delay()和debounceTime()上的消費方。

Answer 2

因此，正如@jonrsharpe所說，您可以在推送側執行此操作，但是如果要在聲明時執行此操作，則可以使用：

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

...

然后：

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

Answer 3

正如您所指出的，

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

您正在接受一個Subject，然后在其上調用delay運算符。 那時，您不再具有主題-而是具有可觀察對象。 鏈接到此的任何其他運算符也將返回Observable。 因此，表達式的結果（即'='右邊的內容）是可觀察的。 因此，Typescript希望您在右側的聲明具有匹配的類型，即Observable。

因此，最簡單的形式是：

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

但是，在您的情況下，您需要鍵入onChange變量以指示Observable發出的類型。 您還應該鍵入主題以使其匹配。 因此，這變為：

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

現實情況是Typescript非常聰明，可以根據使用情況推斷類型，因此您可以實際使用：

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

Typescript編譯器將看到您的延遲運算符（以及產生的debounceTime運算符）的返回類型是可觀察的，並自動將該類型分配給您的onChange實例變量。

在這種情況下，您是否願意將類型放在onChange變量上是個人喜好-編譯器不需要，但是有助於增加代碼清晰度。