Typescript errors with jQuery events

Question

I have migrated a project to Typescript. So far so great, but I am running into trouble with jQuery events.

e.g. for the code

$(document).on('cc.command',
...

Typescript throws the error

ERROR in [..]/src/modules/command-center.ts
./src/modules/command-center.ts
[tsl] ERROR in [..]/src/modules/command-center.ts(24,18)
      TS2345: Argument of type '"cc.command"' is not assignable to parameter of type 'TypeEventHandlers<Document, (this: Document, e: Event, str: string) => void, Document, Document>'.

Similarly, with the code

$('#user-input').keydown(
      function onKeydown(e:KeyboardEvent): void {
...

I am getting the error

ERROR in [..|/src/modules/user-interface.ts
./src/modules/user-interface.ts
[tsl] ERROR in [..|/src/modules/user-interface.ts(55,16)
      TS2345: Argument of type '(this: HTMLElement, e: KeyboardEvent) => void' is not assignable to parameter of type 'false | EventHandlerBase<HTMLElement, KeyDownEvent<HTMLElement, null, HTMLElement, HTMLElement>> | undefined'.
  Type '(this: HTMLElement, e: KeyboardEvent) => void' is not assignable to type 'EventHandlerBase<HTMLElement, KeyDownEvent<HTMLElement, null, HTMLElement, HTMLElement>>'.
    Types of parameters 'e' and 't' are incompatible.
      Type 'KeyDownEvent<HTMLElement, null, HTMLElement, HTMLElement>' is missing the following properties from type 'KeyboardEvent': code, location, repeat, getModifierState, and 20 more.

And another one, with:

$('#user-name').on('blur',
..

I am getting

ERROR in [..|/src/modules/user-interface.ts
./src/modules/user-interface.ts
[tsl] ERROR in [..|/src/modules/user-interface.ts(65,24)
      TS2345: Argument of type '"blur"' is not assignable to parameter of type 'TypeEventHandlers<HTMLElement, (this: HTMLElement, e: KeyboardEvent) => void, HTMLElement, HTMLElement>'.

I have installed the jQuery type definitions and the same errors occur when I set strictFunctionTypes to false in tsconfig.json

How can I fix these errors?

I should mention that I am using the npm packages typescript 3.1.6, jquery 3.4.0 and @types/jquery 3.3.29.

I changed to` import * as $ from 'jquery';` but this creates different errors: `TS2349: Cannot invoke an expression whose type lacks a call signature. ` — Mark, Apr 12 '19 at 14:34
https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript — Pranav C Balan, Apr 12 '19 at 14:35
The types for events in the handler are JQuery.SomeSpecificEvent. Let the compiler infer the type to see if it solves part of the issue. — , Apr 13 '19 at 11:14
Hard to track the correct type. The closed I found was `` At the end I just casted it to , I do not want to clutter my code too much. — Mark, Apr 15 '19 at 07:59

Typescript errors with jQuery events

0 Answers0