Does TypeScript support TouchEvent?

Question

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.

@norahiko has a Github project with an approach to this: https://github.com/norahiko/TouchEvent.d.ts — Drew Noakes, Oct 02 '14 at 17:39
Here it is. :[github.com/borisyankov/DefinitelyTyped/touch-events/touch-events.d.ts](https://github.com/borisyankov/DefinitelyTyped/blob/master/touch-events/touch-events.d.ts) — harry0000, Mar 23 '15 at 18:41

Ezward · Answer 1 · 2021-04-26T22:08:38.877

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;
}

do you have code for latest version of typescript? i am getting error for AbstractView and MSHTMLElementRangeExtensions etc. — morpheus, Aug 16 '14 at 02:07
Thanks. Pretty sad to see w3c designed this weird event model (use TouchList instead of Touch[]). Not sure why they don't just follow simple plain javascript object. — Jianwu Chen, Oct 12 '19 at 00:40

score 7 · Accepted Answer · answered Oct 13 '12 at 03:48

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")));

This ommision is weird. Thanks for the advice. Time to learn TypeScript ambients. — Ezward, Oct 13 '12 at 04:36

score 6 · Answer 3 · answered Oct 15 '12 at 23:29

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;
}

score 1 · Answer 4 · answered Apr 26 '21 at 16:19

1

UPDATE

Since 3.7.7, Typescript has full support for TouchEvent interface.

See TouchEvent interface

answered Apr 26 '21 at 16:19

Анна

749
8
19

Does TypeScript support TouchEvent?

4 Answers4

Linked