TypeScript jQuery on click event type

Question

I have some code in an angular typescript file:

$('.dashboard-table').on('click', 'tbody tr', 
      function(event: JQueryEventObject) {   // changing this to any removes TS error
          const test: Test = <Test>$('.dashboard-table').DataTable().row(this).data();
          self.openTest(test.id, event);
      }
);

openTest(id: number, $event: MouseEvent|JQueryEventObject) {
    let target = $event.srcElement || $event.target as HTMLElement;
    if (target.tagName.toLowerCase() == 'a'
        || $(target).parents('a').length
        || target.tagName.toLowerCase() == 'button'
        || $(target).parents('button').length) {
        return;
    }
    this.router.navigate([this.urls.paths.test(id)]);
}

It's throwing a TypeScript error:

error TS2345: Argument of type '"click"' is not assignable to parameter of type 
'PlainObject<false | EventHandler<HTMLElement, 
(this: HTMLElement, event: JQueryEventObject) => vo...'.`.  

How do I get ng serve to not truncate the TypeScript error message? How do I re-write it to not fail typescript checking?

Answer 1

JQuery's on() method passes an object of type JQuery.Event to the handler, which you can read more about here: https://api.jquery.com/category/events/event-object/.

Example: $(document).on('click', (event: JQuery.Event) => { console.log(event); });