jquerytypescriptclipboarddata

How to type a jQuery .on("paste", hdl)

I'm trying to define the handler for a contenteditable <div> under Chrome (only). I have a jQuery JQuery<HTMLElement> for it and I want to add a paste event handler with .on(), but typescript complains at this point with:

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'string' is not assignable to parameter of type
'TypeEventHandlers<HTMLElement, (event: ClipboardEvent) => void, HTMLElement, HTMLElement>'.ts(2769)
JQuery.d.ts(8059, 5): The last overload is declared here.

The code is:

const pasteHandler = (event: ClipboardEvent): void => {
    const pastedData = event.clipboardData!.getData("text/plain");
    console.log(pastedData);
};
$("div").on("paste", pasteHandler); // <- error message from here

What is the correct typing for pasteHandler? I tried, but was not able to decipher the jQuery type files. The only workaround I have found is to substitute the on call with: $("div")[0].addEventListener("paste", pasteHandler); Thanks for your help! Please do not focus on the jQuery use. It is an old code.

Solution

  • It can be

    const pasteHandler = (event: JQuery.TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement): void => {
  const pastedData = (event.originalEvent as ClipboardEvent).clipboardData?.getData("text/plain");
  //...
}

    Demo: https://codesandbox.io/s/strange-noether-lgnsi?file=/src/index.ts