title: React + TypeScript: Scroll event type not assignable to window.addEventListener
body: <p>Can it be that TypeScript DOM types for events and React Event types don't go well with another?</p>
  <p>Look at this code:</p>
  <pre><code>  useEffect(() =&gt; {
      const onScroll = (event: React.ChangeEvent&lt;Body&gt;) =&gt; {
        console.log(&quot;event&quot;, event.target);
      };
  
      window.addEventListener(&quot;scroll&quot;, onScroll);
  
      return () =&gt; window.removeEventListener(&quot;scroll&quot;, onScroll);
    }, []);
  </code></pre>
  <p>It throws</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(type: &quot;scroll&quot;, listener: (this: Window, ev: Event) =&gt; any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
      Argument of type '(event: ChangeEvent&lt;Body&gt;) =&gt; void' is not assignable to parameter of type '(this: Window, ev: Event) =&gt; any'.
        Types of parameters 'event' and 'ev' are incompatible.
          Type 'Event' is not assignable to type 'ChangeEvent&lt;Body&gt;'.
  </code></pre>
  <p>Than I tried the following. This compiles correctly.</p>
  <pre><code>  useEffect(() =&gt; {
      const onScroll = (event: Event) =&gt; { // &lt;--- changed event type here
        console.log(&quot;event&quot;, event.target);
      };
  
      window.addEventListener(&quot;scroll&quot;, onScroll);
  
      return () =&gt; window.removeEventListener(&quot;scroll&quot;, onScroll);
    }, []);
  </code></pre>
  <p><code>event.target</code> can not be access without compile errors, though. I checked the following function call (it is working in the browser if I ts-ignore the error):</p>
  <pre><code>  useEffect(() =&gt; {
      const onScroll = (event: Event) =&gt; {
        console.log(
          &quot;event&quot;,
          event?.target?.activeElement.getBoundingClientRect() // &lt;--- this function call is actually working (ts-ignored it), even if TypeScript throws an error
        );
      };
  
      window.addEventListener(&quot;scroll&quot;, onScroll);
  
      return () =&gt; window.removeEventListener(&quot;scroll&quot;, onScroll);
    }, []);
  </code></pre>
  <p>throws</p>
  <pre><code>TypeScript error in /home/sirhennihau/Workspace/giphy-search/src/Components/grid.tsx(27,24):
  Property 'activeElement' does not exist on type 'EventTarget'.  TS2339
  
      25 |       console.log(
      26 |         &quot;event&quot;,
    &gt; 27 |         event?.target?.activeElement.getBoundingClientRect()
         |                        ^
      28 |       );
      29 |     };
      30 |
  </code></pre>
  <p>My dependencies:</p>
  <pre><code>    &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.53&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.0.3&quot;
  </code></pre>
  <p>Are maybe just the typings bad or am I doing something wrong?</p>