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

The issue arises when trying to use the Jquery .addClass() function in Chrome, yet it functions perfectly in Mozilla Firefox

Revolutionary scroll-based navigation fill transition

Using asynchronous file uploading with jQuery and ASP.NET for a seamless user experience

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

I aim to retrieve the value of the input textbox located alongside the button using jQuery

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

``Changing the value of a class variable in Angular 2 does not result in the

Discover the method for two form fields to submit data to a distant page, located two pages away

A guide on implementing TypeScript with React Native's platform-specific extensions

The animation-play-state is set to 'running', however, it refuses to start playing

The navigation bar vanishes from sight while scrolling underneath other sections

Dynamically retrieve search options in Flexigrid using jQuery

Tips for invoking both a typescript arrow function and a regular javascript function within one event

Hide, show, toggle, or empty elements using jQuery

What could be causing my Codepen code to malfunction?

How can I receive live notifications for a document as soon as it is created?

The fadein feature in Deps.Autorun is not functioning as expected in Meteor version 0.5.9

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

Achieve multiple returns of a function by employing .fadeOut() iteratively instead of just once

Use the powerful $.post() method to transfer an image to another page seamlessly