Strong typing eventListener calls

Question

I'm having some issues strong typing this._onResize and onMouseDown.

At line 28, onMouseDown(event, this); throws the error ESLint: Unsafe call of an any typed value.(@typescript-eslint/no-unsafe-call)

At line 37-38, this._handle.removeEventListener('mousedown', this._onResize); and this._handle.removeEventListener('touchstart', this._onResize); throw the error S2769: No overload matches this call..

For more detail, it says:

TS2769: No overload matches this call. Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | EventListenerOptions | undefined): void', gave the following error. Argument of type '"mousedown"' is not assignable to parameter of type 'keyof ElementEventMap'. Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void', gave the following error. Argument of type '((event: MouseEvent | TouchEvent) => void) | null | undefined' is not assignable to parameter of type 'EventListenerOrEventListenerObject'. Type 'undefined' is not assignable to type 'EventListenerOrEventListenerObject'.

My code is as follows:

import { Renderer2 } from '@angular/core';

export class ResizeHandle {
  protected _handle: Element | undefined | null;
  private _onResize: ((event: MouseEvent | TouchEvent) => void) | undefined | null;

  constructor(
    protected parent: Element,
    protected renderer: Renderer2,
    public type: string,
    public css: string,
    private onMouseDown
  ) {
    // generate handle div
    const handle = renderer.createElement('div') as HTMLDivElement;
    renderer.addClass(handle, 'resizable-handle');
    renderer.addClass(handle, css);
    // add default diagonal for se handle
    if (type === 'se') {
      renderer.addClass(handle, 'resizable-diagonal');
    }
    // append div to parent
    if (this.parent) {
      parent.appendChild(handle);
    }
    // create and register event listener
    this._onResize = (event: MouseEvent | TouchEvent) => {
      onMouseDown(event, this);
    };
    handle.addEventListener('mousedown', this._onResize, { passive: false });
    handle.addEventListener('touchstart', this._onResize, { passive: false });
    this._handle = handle;
  }

  dispose(): void {
    if (this._handle) {
      this._handle.removeEventListener('mousedown', this._onResize);
      this._handle.removeEventListener('touchstart', this._onResize);
      if (this.parent) {
        this.parent.removeChild(this._handle);
      }
    }
    this._handle = null;
    this._onResize = null;
  }

  get element(): Element | undefined | null {
    return this._handle;
  }
}

What types need to be assigned to these values?

user_4166522 · Answer

The first thing to say is your code works fine, these are just TypeScript typing problems.

Your first problem, the unsafe call linting error, is because you haven't provided a type for onMouseDown in the constructor signature. ESLint sees onMouseDown is typed as 'any' and gets upset when you try to call it, because of the no-unsafe-call rule.

To fix this change the constructor signature as below:

  constructor(
    protected parent: Element,
    protected renderer: Renderer2,
    public type: string,
    public css: string,
    private onMouseDown: (event: MouseEvent | TouchEvent, rh: ResizeHandle) => void
  ) {

Your second problem is caused by having strictFunctionTypes set to true, and then trying to pass a strongly-typed event listener to removeEventListener which just wants an EventListener type. The workaround is simply to cast _onResize to EventListener in dispose() as below:

  this._handle.removeEventListener('mousedown', this._onResize as EventListener);
  this._handle.removeEventListener('touchstart', this._onResize as EventListener);

Strong typing eventListener calls

1 Answers