クリックが内側だったコンポーネントまたはないtypescriptです

Question

に反応する検出した場合、私は、次のおおよそ持っている：

componentDidMount() {                                               
    document.querySelector('body')!.addEventListener('click', this.click); 
} 

click = (e: Event) => {                                               
    if (this.state.toggled) { 
    if (!ReactDom.findDOMNode(this.someRef).contains(e.target)) { 
     this.setState({ toggled: false }); 
    } 
    } 
}; 

render() { 
    return (<CustomElement 
    ref={(e) => { this.someRef = e; }}                                         
    />) 
} 

このコードは正しく、ユーザーが内部またはCustomElement外側をクリックするかどうかを検出し、これまでのところは良いです。

しかし、tscは、このすべてに満足していないです：

error TS2345: Argument of type 'EventTarget' is not assignable to parameter of type 'Node'. 
    Property 'attributes' is missing in type 'EventTarget'. 

はe.targetが唯一のイベントハンドラを追加および削除するための関数を定義するように見えるEventTargetあるので、これは、理にかなってnode_modules/typescript/lib/lib.d.tsを見てみます。しかしMDNはe.targetが "イベントをディスパッチしたオブジェクトへの参照"であると言いますそれは私が望むものに近い音です。

私は現在どのように機能していますか？また、tscを喜ばせると同時に（エラーを抑止するのではなく）？

Answer 1

どのようにこのようなあなたのクリックハンドラを定義について：

private click = (e: Event) => 
{ 
    if (e.target instanceof HTMLElement && !ReactDOM.findDOMNode(this.someRef).contains(e.target)) 
    { 
     if (this.state.toggled) 
     { 
      this.setState({ toggled: false }); 
     } 
    } 
} 

サンプルpenを。

Answer 2

私は、型アサーションがprobably unavoidableである。この場合には言うtypescript issue queueで同様の議論が見つかりました：

は、基本的なEventTarget要素がサブタイプとなっている最も一般的なタイプであり、かつのHTMLElementはのサブタイプでありますそれ。 DOMから物事を取り戻す場合は、一般的にはわかりません。特定のDOMレイアウトの構造に関する特定の外部知識を「追加」するために型アサーションを追加する必要があります。

たとえば、イベントのtargetはElementではありません（たとえば、イベントリスナーをXMLHttpRequestに追加できます。また、XMLHttpRequestにはgetBoundingClientRectメソッドがありません）。

ターゲットは私が望むようにNodeかもしれないし、そうでないかもしれないので、TSは真実を推論することができず、私は主張する必要がある。

​​が正しい解決策です。