Home Ask Login Register

Developers Planet

Your answer is one click away!

Highdown February 2016

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 th

Answers


Szabolcs Dézsi February 2016

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.

Post Status

Asked in February 2016
Viewed 2,691 times
Voted 12
Answered 1 times

Search




Leave an answer


Quote of the day: live life