CODEWITHSUNDEEP
typescript
Ezward
Ezward

Reputation: 17702

Does TypeScript support TouchEvent?

UPDATE

TypeScript 1.5.3 added declarations for HTML Touch events to lib.d.ts

I can see that it supports UIEvent, but it does not seem to have interfaces for touch events.

This code indicates that "TouchEvent does not exist in the current scope."

class Touchy {
    private _element:Element;

    constructor(theElement:Element) {
        this._element = theElement;

        theElement.addEventListener("touchstart", (theTouchEvent:TouchEvent) => alert("touchy"));
    }
}

I can use UIEvent, but not TouchEvent. How would I handle TouchEvent's with TypeScript? Thanks.

Upvotes: 18

Views: 18956

Answers (4)

Ezward
Ezward

Reputation: 17702

Since TypeScript 3.7.7, TouchEvent is supported in lib.dom.d, see TouchEvent It's still worth going to the Touch Events W3C specification to more fully understand the TypeScript declarations.

Original Answer: thank you for the advice. I went to the Touch Events Specification W3C Working Draft 05 May 2011 and created a set of ambient declarations from that. There is a more recent candidate recommendation, but this is what I think is actually implemented in most browsers. This seems to work well.

PS: the declare var TouchEvent at the bottom is not part of the w3c draft. It is an adaptation of the same code for UIEvent that is part of the standard interfaces shipped with TypeScript.

interface Touch {
    identifier:number;
    target:EventTarget;
    screenX:number;
    screenY:number;
    clientX:number;
    clientY:number;
    pageX:number;
    pageY:number;
};

interface TouchList {
    length:number;
    item (index:number):Touch;
    identifiedTouch(identifier:number):Touch;
};

interface TouchEvent extends UIEvent {
    touches:TouchList;
    targetTouches:TouchList;
    changedTouches:TouchList;
    altKey:bool;
    metaKey:bool;
    ctrlKey:bool;
    shiftKey:bool;
    initTouchEvent (type:string, canBubble:bool, cancelable:bool, view:AbstractView, detail:number, ctrlKey:bool, altKey:bool, shiftKey:bool, metaKey:bool, touches:TouchList, targetTouches:TouchList, changedTouches:TouchList);
};
   
declare var TouchEvent: {
    prototype: TouchEvent;
    new(): TouchEvent;
}

Upvotes: 17

Anya
Anya

Reputation: 1398

UPDATE

Since 3.7.7, Typescript has full support for TouchEvent interface.

See TouchEvent interface

Upvotes: 2

Ezward
Ezward

Reputation: 17702

Here is a addendum. This code adds type event handlers to HTMLElement. You can add this after the code that defines the TouchEvent interface;

//
// add touch events to HTMLElement
//
interface HTMLElement extends Element, MSHTMLElementRangeExtensions, ElementCSSInlineStyle, MSEventAttachmentTarget, MSHTMLElementExtensions, MSNodeExtensions {
    ontouchstart: (ev: TouchEvent) => any;
    ontouchmove: (ev: TouchEvent) => any;
    ontouchend: (ev: TouchEvent) => any;
    ontouchcancel: (ev: TouchEvent) => any;
}

Upvotes: 6

Ryan Cavanaugh
Ryan Cavanaugh

Reputation: 220954

You have several options here:

First option: Extend UIEvent to have the members you'd expect on a TouchEvent (and only use them in touch event listeners):

interface UIEvent {
    targetTouches: { pageX: number; pageY: number; }[];
    // etc...
}

Second option: Define your own TouchEvent interface and add a type assertion when binding the event

interface TouchEvent {
    (event: TouchEventArgs): void;
}

interface TouchEventArgs {
    targetTouches: { pageX: number; pageY: number; }[];
    // etc
}

 theElement.addEventListener("touchstart", <UIEvent>((theTouchEvent:TouchEvent) => alert("touchy")));

Upvotes: 7

Related Questions