Is the dts lib for touchevents supported by TypeScript version 1.7.6?

Question

Is the dts lib for touchevents supported by TypeScript version 1.7.6?

Recently, I came across a post discussing whether TypeScript supports TouchEvent. The article mentioned that TypeScript 1.5.3 included declarations for HTML Touch events in lib.d.ts.

But now, with TypeScript version 1.7.6, I'm encountering an error in Visual Studio 2015 stating: Property 'changedTouches' does not exist on type 'Event.'

I tried downloading the latest jquery.TypeScript.DefinitelyTyped version="2.8.8" using NuGet but it didn't seem to work. Does anyone have any suggestions?

Update: After checking the jquery d.ts file both from NuGet and GitHub, I found them to be the same.

Code Snippet:

$('#previewEvent').on('mousedown touchstart', function(e) {
 var original = e.originalEvent;
 if (original.changedTouches && CheckMobile.isTouch_p) {
     const touchobj = original.changedTouches[0];
     swipedir = 'none';
     distX = 0;
     distY = 0;
     startX = touchobj.pageX;
     startY = touchobj.pageY;
    
     startTime = new Date().getTime();
     return !0;
} else if (!CheckMobile.isTouch_p) {
     return !0;
 }
 return !0;
});

Update: I initially misunderstood what lib.d.ts referred to, thinking it was related to jQuery when it is actually one of the libraries installed with TypeScript.

Even after updating the library, I still face the same error. Although the lib.d.ts file seems to include touch event definitions, there seems to be compatibility issues between jQuery BaseJQueryEventObject interface and TypeScript TouchEvent interface.

Any thoughts on how to fix this issue correctly? It seems like resolving the interfaces might require a third d.ts file.

Thank you...

jquery typescript definitelytyped

Answer 1

Answer №1

When you are working in your handler function, the variable e is defined as type JQueryEventObject.

The property originalEvent originates from BaseJQueryEventObject and is of type Event. This Event eventually leads back to lib.d.ts. Everything seems clear so far.

Since the Event interface serves as a base for various derived event types (such as GamepadEvent, MutationEvent, etc.), it only includes fields that are common across all these event types. This is why accessing changedTouches is not possible, because according to TypeScript, it may not necessarily be a TouchEvent.

To address this issue, you can leverage a feature introduced in TypeScript 1.4 known as type guards.

In JavaScript, a common practice is to use typeof or instanceof to check the type of an expression at runtime. TypeScript now recognizes these conditions and adjusts type inference accordingly when used within an if block.

Given that you have assigned the same handler for both the mousedown and touchstart events, e.originalEvent could either be a MouseEvent or a TouchEvent.

Therefore, you need to handle these two scenarios:

$("#previewEvent").on("mousedown touchstart", function(e) {
    var original = e.originalEvent;
    if(original instanceof TouchEvent) {
        // Processing the touchstart event
    } else if(original instanceof MouseEvent) {
        // Handling the mousedown event
    }
});

A notable advantage, as mentioned in the quote, is that you will receive appropriate autocompletion support within each branch of the if statement.

Answer 2

When you are working in your handler function, the variable e is defined as type JQueryEventObject.

The property originalEvent originates from BaseJQueryEventObject and is of type Event. This Event eventually leads back to lib.d.ts. Everything seems clear so far.

Since the Event interface serves as a base for various derived event types (such as GamepadEvent, MutationEvent, etc.), it only includes fields that are common across all these event types. This is why accessing changedTouches is not possible, because according to TypeScript, it may not necessarily be a TouchEvent.

To address this issue, you can leverage a feature introduced in TypeScript 1.4 known as type guards.

In JavaScript, a common practice is to use typeof or instanceof to check the type of an expression at runtime. TypeScript now recognizes these conditions and adjusts type inference accordingly when used within an if block.

Given that you have assigned the same handler for both the mousedown and touchstart events, e.originalEvent could either be a MouseEvent or a TouchEvent.

Therefore, you need to handle these two scenarios:

$("#previewEvent").on("mousedown touchstart", function(e) {
    var original = e.originalEvent;
    if(original instanceof TouchEvent) {
        // Processing the touchstart event
    } else if(original instanceof MouseEvent) {
        // Handling the mousedown event
    }
});

A notable advantage, as mentioned in the quote, is that you will receive appropriate autocompletion support within each branch of the if statement.

Is the dts lib for touchevents supported by TypeScript version 1.7.6?

Answer №1

Similar questions

Unable to execute JavaScript function by clicking

"Implementing JavaScript Validation for Textboxes: A Step-by-Step Guide

Upon submission of user-entered data, save it in an HTML table by creating an array variable for each column of the table

Performing an AJAX call in Joomla version 3.3

Can I go back to the initial JQuery callback?

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

Leveraging the power of jQuery's ajax function within Asp.Net

Do TypeScript project references provide value when noEmit is used?

Updated to TSC version 2.0.0- VS Code syntax checker unable to resolve node modules

Can you explain how TypeScript module resolution handles global values?

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

Having trouble locating the custom interface name in a TypeScript custom npm package?

What is the best way to choose multiple elements within an Angular application?

I am experiencing an issue with my jQuery loop code not functioning properly when using the .each method within the loop

Having trouble binding all elements with the JQuery .on() method in a Phonegap app running on Android 4.0?

Activate Jquery when the screen width is below 500 pixels

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Sorting time using jQuery in 'hh min' format

Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

Struggling to retrieve the ID from the API within the Angular and .NET Core component