TypeScript 支持 TouchEvent 吗？

Does TypeScript support TouchEvent?

提问by Ezward

UPDATE

更新

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

TypeScript 1.5.3 向 lib.d.ts 添加了 HTML Touch 事件的声明

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

我可以看到它支持 UIEvent，但它似乎没有触摸事件的接口。

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

此代码表示“当前范围内不存在 TouchEvent”。

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.

我可以使用 UIEvent，但不能使用 TouchEvent。我将如何使用 TypeScript 处理 TouchEvent？谢谢。

采纳答案by Ryan Cavanaugh

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):

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

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

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

第二种选择：定义自己的TouchEvent接口并在绑定事件时添加类型断言

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

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

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

回答by Ezward

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.

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

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.

PS：底部的declare 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;
}

回答by Ezward

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

这是一个附录。此代码将类型事件处理程序添加到 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;
}