18

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.

2

4 Answers 4

17

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;
}
3
  • do you have code for latest version of typescript? i am getting error for AbstractView and MSHTMLElementRangeExtensions etc.
    – morpheus
    Commented Aug 16, 2014 at 2: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. Commented Oct 12, 2019 at 0:40
  • not working in 4.3.2 typescriptlang.org/play?#code/… Commented Jun 7, 2021 at 11:05
7

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")));
2
  • This ommision is weird. Thanks for the advice. Time to learn TypeScript ambients.
    – Ezward
    Commented Oct 13, 2012 at 4:36
  • How would you define this to be used in JSDoc JavaScript?
    – thednp
    Commented Jan 12, 2022 at 7:17
6

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

UPDATE

Since 3.7.7, Typescript has full support for TouchEvent interface.

See TouchEvent interface

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.