Does TypeScript supporta TouchEvent?

Question

UPDATE

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

posso vedere che supporta UIEvent, ma non sembrano avere interfacce per eventi touch.

Questo codice indica che "TouchEvent non esiste nell'ambito corrente."

class Touchy { 
    private _element:Element; 

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

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

Posso usare UIEvent, ma non TouchEvent. Come gestirò TouchEvent con TypeScript? Grazie.

Answer 1

Sono disponibili diverse opzioni qui:

Prima opzione: Estendere UIEvent di avere i membri che ci si aspetta su un TouchEvent (e solo utilizzarli in contatto gli ascoltatori di eventi):

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

Seconda opzione : Definisci la tua interfaccia TouchEvent e aggiungi un'asserzione di tipo durante l'associazione dell'evento

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

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

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

Answer 2

grazie per il consiglio. Sono andato alla bozza di lavoro W3C della specifica degli eventi di tocco 05 maggio 2011 e ho creato una serie di dichiarazioni ambientali da quella. C'è una raccomandazione più recente per i candidati, ma questo è ciò che penso sia effettivamente implementato nella maggior parte dei browser. Questo sembra funzionare bene.

PS: la dichiarazione var TouchEvent in basso non fa parte della bozza w3c. È un adattamento dello stesso codice per UIEvent che fa parte delle interfacce standard fornite con 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 3

Ecco un addendum. Questo codice aggiunge i gestori di eventi di tipo a HTMLElement. È possibile aggiungere questo dopo il codice che definisce l'interfaccia 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; 
}