Using TypeScript and JQuery: handler event does not possess the properties 'target' and 'currentTarget'

Question

Using TypeScript and JQuery: handler event does not possess the properties 'target' and 'currentTarget'

I encountered the following error message:

TS2339: Property 'target' does not exist on type 'Event'.

while working with this code snippet:

this.$Element.on('click', SELECTOR, (event: JQuery.Event) => {
    const $ClickedLink: JQuery<HTMLElement> = JQuery(event.target);
    //
}

Additionally, event.currentTarget is also undefined. This makes me wonder if these properties are properly defined in the JQuery types?

It is worth noting that there were no errors present when I compiled the JavaScript code.

Just to clarify, this code does not belong to Angular! It is a combination of JQuery and class-based OOP concepts.

jquery typescript

Answer 1

Answer №1

The reason behind this is that when using the @types/jquery type for the event passed to a callback (instead of the $.Event function), it is referred to as TriggeredEvent and not Event:

this.$Element.on('click', SELECTOR, (event: JQuery.TriggeredEvent) => {
  const $ClickedLink: JQuery<HTMLElement> = JQuery(event.target);
  // ... snip ...
}

Answer 2

The reason behind this is that when using the @types/jquery type for the event passed to a callback (instead of the $.Event function), it is referred to as TriggeredEvent and not Event:

this.$Element.on('click', SELECTOR, (event: JQuery.TriggeredEvent) => {
  const $ClickedLink: JQuery<HTMLElement> = JQuery(event.target);
  // ... snip ...
}

Using TypeScript and JQuery: handler event does not possess the properties 'target' and 'currentTarget'

Answer №1

Similar questions

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Unexpected token ')' in Unity Javascript: expecting '{' but found 'EOF'

Step-by-step guide on stacking multiple images in a Bootstrap 4 carousel

Looking for a way to prevent anonymous functions in jQuery using Greasemonkey?

Image encoded in base64 not appearing on the screen

The script initially fails to fetch the correct image height but is able to retrieve it successfully during subsequent calls

Discovering a way to retrieve objects from an array of objects with matching IDs

maximum number of results in google custom search limit

Tips for concealing a div upon reaching a specific scroll point, even with varying content sizes

Navigating through nested data in React TypeScript can be accomplished by accessing the nested data

sort the array based on its data type

What is the process for adding a highlighted area beneath a curve on a high chart?

Tips for configuring the Index column within an Angular Mat-table (when the dataIndex displays 'NaN')

How to Display an Element Using AngularJs

Obtaining a value from an element dynamically loaded at runtime using jQuery and AJAX

Enhancing Application Performance Through Next.js Development

JS Fiddle JSON/ECHO not displaying any data

Display data in Bootstrap table using JQuery and JSON

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Issues with the transparency of a basic tab image gallery (CSS + jQuery)