title: not assignable type for event listener
body: <p>I am trying to create a TypeScript React component that has an event listener. However, when I do so, I get the following error message:</p>
  
  <blockquote>
    <p>TS2345: Argument of type '(event: React.MouseEvent) =>
    void' is not assignable to parameter of type
    'EventListenerOrEventListenerObject'.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/SzdA3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SzdA3.png" alt="enter image description here"></a></p>
  
  <p>Am I missing a certain type check? Thanks. You can see the component code below.</p>
  
  <p><strong>sampleComponent.tsx:</strong></p>
  
  <pre><code>import * as React from 'react';
  
  interface MyState {
    onClick: boolean;
  }
  
  export default class SampleComponent extends React.Component&lt;{}, MyState&gt; {
    private divRef: React.RefObject&lt;HTMLDivElement&gt;;
  
    public constructor() {
      super({});
      this.state = {
        onClick: false,
      };
      this.divRef = React.createRef();
      this.handleClickOutside = this.handleClickOutside.bind(this);
    }
  
    public componentDidMount(): void {
      document.addEventListener('mousedown', this.handleClickOutside);
    }
  
    public handleClickOutside(event: React.MouseEvent&lt;HTMLElement&gt;): void {
      if (
        this.divRef.current.contains(event.target as Node)
      ) {
        this.setState({ onClick: true });
      }
    }
  
    public render(): React.ReactElement {
      return (
        &lt;div ref={this.divRef}&gt;
          { this.state.onClick ? 'Foo' : 'Bar' }
        &lt;/div&gt;
      );
    }
  }
  </code></pre>