変数がインタフェースのすべてのメンバーを持っているかどうかを確認する方法

Question

私は、シェイプを描き、そのようなイベントをonClick..etcのように処理できるキャンバスがあるとしましょう。 キャンバスで描くことができるすべてのシェイプはDrawableインターフェイスを実装します。

interface Drawable{ 
    toPath(): Path2D; 
} 

シェイプがマウスイベントをサポートする場合、それはSupportsEventsインターフェイスを実装します。すべての形状の配列があります

interface SupportsEvents{ 
    on(eventName, callback); 
    trigger(eventName); 
} 

：

shapesToDraw: Drawable[] = []; 

そのDrawableの[]キャンバスはこの配列からすべての図形を描画しますので。 しかし、ユーザーがキャンバスをクリックすると、ユーザーがクリックした形状が検出され、 'onclick'イベントがトリガーされます。 したがって、配列をフィルタリングし、イベントをサポートするシェイプを残す必要があります（SupportsEventsを実装します）。どうすればいいですか？

shapesToDraw.filter(shape=>shape.hasPoint() && shape implements SupportsEvents) 

もちろん、それぞれが'on'in shape && 'trigger' in shapeであるかどうかを確認できますが、より良い方法がありますか？

Answer 1

オブジェクトが特定のタイプかどうかを確認するためにランタイムチェックを使用することの質問には、異なる回答があります。 TypeScriptはこれを行うための魔法の方法を提供しません（ランタイム機能を追加しないため）。あなた自身で作成する必要があります。しかし、あなたは活字体はあなたがやっていることを理解し、あなたのための型を狭めるような方法でそれを行うことができます。

をあなたはDrawableがonとtriggerキーを持っている場合、それはSupportsEventsを実装することを決めましょう。ここでは活字体はあなたがやっているかを知ることができますuser-defined type guardです：

function implementsSupportsEvents(shape: Drawable): shape is Drawable & SupportsEvents { 
    return 'on' in shape && 'trigger' in shape 
} 

を今、あなたはfilterは、このタイプのガードを使用することができます

var shapesSupportingEvents = shapesToDraw.filter(implementsSupportsEvents); 

、あなたがshapesSupportingEventsの種類を見れば、あなたが表示されます助け

shapesSupportingEvents.forEach(shape => shape.trigger('click')); 

希望：その活字体は、コンパイルするには、以下のようなものができるように、(Drawable & SupportsEvents)[]としてそれを推測します。がんばろう！