CODEWITHSUNDEEP
jquerytypescriptdefinitelytyped
Highdown
Highdown

Reputation: 674

Does TypeScript version 1.7.6 support dts lib for touchevents?

I found the following link: Does TypeScript support TouchEvent?

It deals with the issue that I am having. According to a post at the top of the article, it states that TypeScript 1.5.3 added declarations for HTML Touch events to lib.d.ts.

Does TypeScript version 1.7.6 support these touch events? I am getting an error in Visual Studio 2015 that states: Property 'changedTouches' does not exist on type 'Event'.

What lib.d.ts is required to get this to work. I have tried using NuGet to download the latest jquery.TypeScript.DefinitelyTyped version="2.8.8", but that does not appear to work.

Any suggestions?

Update I verified that the jquery d.ts file from NuGet is the same as the one on https://github.com/DefinitelyTyped/DefinitelyTyped.

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;
     // record time when finger first makes contact with surface
     startTime = new Date().getTime();
     return !0;
} else if (!CheckMobile.isTouch_p) {
     return !0;
 }
 return !0;
});

Update I initially thought the lib.d.ts referred to jQuery. I was wrong, it is one of the libraries that are installed with TypeScript.

I have updated the library, but still have the same error. The lib.d.ts file does seem to have the touch definitions, which is a step in the right direction.

The issue appears to be an incompatibility between the jQuery BaseJQueryEventObject interface and the TypeScript TouchEvent interface. I am not yet sure how to resolve the issue, but I can eliminate the error by declaring var original: any = e.originalEvent, which masks the incompatibility.

Any ideas on how to solve this the right way? I am guessing that it will take a third d.ts file to iron out the interfaces.

Thanks...

Upvotes: 1

Views: 768

Answers (1)

Szabolcs Dézsi
Szabolcs Dézsi

Reputation: 8843

In your handler function e is of type JQueryEventObject.

originalEvent comes from BaseJQueryEventObject and it's of type Event. This Event is where we get back to lib.d.ts. All clear so far.

Because Event is the base interface for a lot of derived event types (like GamepadEvent, MutationEvent and so on) it only contains fields for shared data across all those event types. That's why you can't get access changedTouches, because as far as the TypeScript compiler is concerned it's not a TouchEvent.

I would go about solving this with a feature introduced in TypeScript 1.4 called type guards.

A common pattern in JavaScript is to use typeof or instanceof to examine the type of an expression at runtime. TypeScript now understands these conditions and will change type inference accordingly when used in an if block.

Because you are specifying the same handler for the mousedown and touchstart events, e.originalEvent can be a MouseEvent or TouchEvent.

So you have to handle these two cases:

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

The good thing is, as the quote says, that you will get proper autocompletion support in each branch of the if statement.

Upvotes: 1

Related Questions