Estoy actualizando mi base de código shorter-js con JSDoc adecuado para generar definiciones de TypeScript, pero no puedo reducir esta.
Tengo el fragmento on() que hace uso de Element.addEventListener nativo, hasta ahora todo bien, el problema es cuando se usa TouchEvent como parámetro para un controlador real, TypeScript arroja un error de 4 líneas, vea el fragmento a continuación.
/** * @param {HTMLElement | Element | Document} element event.target * @param {string} eventName event.type * @param {EventListener} handler callback * @param {EventListenerOptions | boolean | undefined} options other event options */ function on(element, eventName, handler, options) { const ops = options || false; element.addEventListener(eventName, handler, ops); } /** * test handler * @type {EventListener} * @param {TouchEvent} e */ function touchdownHandler(e){ console.log(e.touches) } // test invocation on(document.body, 'touchdown', touchdownHandler); body {height: 100%} La invocación on(document.body, 'touchdown', touchdownHandler) arroja este error de 4 líneas:
Argument of type '(e: TouchEvent) => void' is not assignable to parameter of type 'EventListener'. Type '(e: TouchEvent) => void' is not assignable to type 'EventListener'. Types of parameters 'e' and 'evt' are incompatible. Type 'Event' is missing the following properties from type 'TouchEvent': altKey, changedTouches, ctrlKey, metaKey, and 7 more. De hecho, obtengo exactamente lo mismo cuando uso la invocación document.body.addEventListener(...) . Así que probé varias definiciones dentro de mi index.d.ts , pero nada para resolver esto.
Que yo sepa, creo que necesito definir algo en mi index.d.ts , luego usarlo en JSDoc para touchdownHandler .
¿Alguna sugerencia?
El problema aquí es que debe proporcionar addEventListener con el tipo de evento real, por lo que el controlador del mapa aceptaría este tipo de evento en particular. La declaración dom.d.ts (biblioteca DOM) contiene mapas de eventos para este uso particular. Su objetivo es asegurarse de que eventName se asigne al tipo de evento del controlador.
Mientras que en TS podemos usar tipos de parámetros para que se pueda hacer sin genéricos, no se puede hacer lo mismo con JSDoc, por lo que tenemos que introducir una variable de plantilla para el tipo de evento:
/** * @template {keyof HTMLElementEventMap} T * @param {HTMLElement} element * @param {T} eventName */ Hay otros mapas de eventos, pero en la mayoría de los casos esto será suficiente. Si no, verifique el código fuente de dom.d.ts
A continuación, debemos escribir handler:
/** * @template {keyof HTMLElementEventMap} T * @param {HTMLElement} element * @param {T} eventName * @param {(event: HTMLElementEventMap[T]) => void} handler */ En este caso, si T será 'click' , obtendremos un event en el controlador como HTMLElementEventMap['click'] , que es MouseEvent .
Y últimas options . En JSDoc puede marcar el parámetro como opcional en lugar de especificar undefined :
/** * @template {keyof HTMLElementEventMap} T * @param {HTMLElement} element * @param {T} eventName * @param {(event: HTMLElementEventMap[T]) => void} handler * @param {EventListenerOptions | boolean} [options] */Esto funcionará como esperas.
Código completo:
/** * @template {keyof HTMLElementEventMap} T * @param {HTMLElement} element * @param {T} eventName * @param {(event: HTMLElementEventMap[T]) => void} handler * @param {EventListenerOptions | boolean} [options] */ function on(element, eventName, handler, options) { const ops = options || false; element.addEventListener(eventName, handler, ops); } /** * test handler * @param {TouchEvent} e */ function touchdownHandler(e) { console.log(e.touches) } // test invocation on(document.body, 'touchend', touchdownHandler);Para declarar esto tienes que usar Generics :
declare function on<T extends keyof HTMLElementEventMap>(element: HTMLElement, eventName: T, handler: (event: HTMLElementEventMap[T]) => void, options?: EventListenerOptions | boolean): void;Como ya marqué una respuesta, también proporcionaré mi solución, que es mucho más simple de lo que pensaba: use EventListenerObject con su método handleEvent :
/** * Add eventListener to an `Element` | `HTMLElement` | `Document` | `Window` target. * * @param {HTMLElement | Element | Document | Window} element event.target * @param {string} eventName event.type * @param {EventListenerObject['handleEvent']} handler callback * @param {(EventListenerOptions | boolean)=} options other event options */ function on(element, eventName, handler, options) { const ops = options || false; element.addEventListener(eventName, handler, ops); }Todo funciona como se esperaba ahora.
on(document, 'load', (e) => console.log(e), false) on(window, 'resize', (e) => console.log(e.type), false) /** * test handler * @type {(event: Event) => void} * @param {TouchEvent} e */ function touchdownHandler(e) { console.log(e.touches) } const div = document.createElement('div') on(div, 'touchstart', touchdownHandler, false) const main = document.createElement('main') on(main, 'touchstart', touchdownHandler, false)