typescript - 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.

Answer 1

从 TypeScript 3.7.7 开始，在 lib.dom.d 中支持 TouchEvent，请参阅TouchEvent 仍然值得阅读 Touch Events W3C 规范以更全面地了解 TypeScript 声明。

原答案：谢谢你的建议。我查看了 2011 年 5 月 5 日的触控事件规范 W3C 工作草案，并从中创建了一组环境声明。有一个更新的候选推荐，但我认为这是在大多数浏览器中实际实现的。这似乎运作良好。

PS：底部的声明 var TouchEvent 不是 w3c 草案的一部分。它是对 UIEvent 的相同代码的改编，它是 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;
}

Answer 2

您在这里有几个选择：

第一个选项：扩展 UIEvent 以在 TouchEvent 上拥有您期望的成员（并且仅在触摸事件侦听器中使用它们）：

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

方案二：定义自己的TouchEvent接口，绑定事件时添加类型断言

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

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

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

Answer 3

这是一个附录。此代码将类型事件处理程序添加到 HTMLElement。您可以在定义 TouchEvent 接口的代码之后添加它；

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

Answer 4

更新

从 3.7.7 开始，Typescript 全面支持 TouchEvent 接口。

见TouchEvent 接口