Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

Question

Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

I'm currently working on a project that involves using JQuery in Typescript. One challenge I'm facing is passing a mouse event from a JQuery element to a wrapper class. Here's an example of what I'm trying to achieve:

import * as $ from 'jquery'

export class Test {
  ele: JQuery;
  constructor() {
    this.ele = $('<div>Hello World</div>');
    this.ele.mousedown((evt) => { this.my_mousedown(evt); });
  }

  my_mousedown(evt: MouseEvent) {
    console.log(evt);
  }
}

The issue I'm encountering is that the type of evt being passed is incorrect:

Argument of type Event<HTMLElement | null> is not assignable to parameter of type 'MouseEvent'

I attempted to adjust my_mousedown to:

my_mousedown(Event<HTMLElement | null>

but received the error:

Event is not generic.

Lastly, when I converted evt back to its original Event type in the JQuery call, it lacked access to any mouse-specific properties like clientX. Any suggestions on how to proceed?

jquery typescript types

Answer 1

Answer №1

After some experimentation, I discovered that there is a different Event interface loaded from JQuery. To make everything work correctly, I had to assign the event type to JQuery.Event. For example:

import * as $ from 'jquery'

export class Test {
  ele: JQuery;

  constructor() {
    this.ele = $('<div>Hello World</div>');
    this.ele.mousedown((evt) => { this.my_mousedown(evt); });
  }

  my_mousedown(evt: JQuery.Event) {
    console.log(evt);
  }
}

Answer 2

After some experimentation, I discovered that there is a different Event interface loaded from JQuery. To make everything work correctly, I had to assign the event type to JQuery.Event. For example:

import * as $ from 'jquery'

export class Test {
  ele: JQuery;

  constructor() {
    this.ele = $('<div>Hello World</div>');
    this.ele.mousedown((evt) => { this.my_mousedown(evt); });
  }

  my_mousedown(evt: JQuery.Event) {
    console.log(evt);
  }
}

Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

Answer №1

Similar questions

Modify the data in the <col> column

Launch a dialogue box by clicking on the buttons corresponding to the article ID

Adjust the start and end dates of the Bootstrap datepicker according to the chosen value

Transform Loopback 4 filter into a SQL WHERE condition

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

Exploring the Functionality of Backend Objects in Frontend TypeScript within the MEAN Stack Environment

Is there a way to integrate TypeScript with styled components to display suggested properties on the component?

Issue encountered while implementing a recursive type within a function

Is there a way to use JavaScript/jQuery to randomly resize images every time the page loads

Ways to interact with similar dynamic controls in Javascript

What are the best practices for dynamically handling variables in JavaScript?

Disable image loading for users who have javascript enabled

Proceed with downloading the file only when a checkbox has been ticked off and the form has been

How to Invoke JavaScript Functions within jQuery Functions?

It is not always a guarantee that all promises in typescript will be resolved completely

2-panel accordion interface

Apollo GraphQL Server is unable to provide data to Angular

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

What is the best method for transferring form data to a string and storing it in localStorage effectively?

Identify when the Vue page changes and execute the appropriate function