TypeScript có hỗ trợ TouchEvent không?

Question

CẬP NHẬT

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

Tôi có thể thấy rằng nó hỗ trợ UIEvent, nhưng nó dường như không có giao diện cho các sự kiện liên lạc.

Mã này cho biết rằng "TouchEvent không tồn tại trong phạm vi hiện tại".

class Touchy { 
    private _element:Element; 

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

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

Tôi có thể sử dụng UIEvent, nhưng không sử dụng TouchEvent. Làm thế nào tôi có thể xử lý TouchEvent với TypeScript? Cảm ơn.

Answer 1

Bạn có nhiều lựa chọn ở đây:

tùy chọn đầu tiên: Mở rộng UIEvent có các thành viên mà bạn mong đợi trên TouchEvent (và chỉ sử dụng chúng trong nghe sự kiện touch):

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

tùy chọn thứ hai : Xác định giao diện TouchEvent của riêng bạn và thêm xác nhận loại khi ràng buộc sự kiện

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

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

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

Answer 2

cảm ơn lời khuyên. Tôi đã đến dự thảo W3C Working Draft 05/05/2011 và đã tạo ra một bộ các khai báo môi trường xung quanh từ đó. Có đề xuất ứng cử viên gần đây hơn, nhưng đây là những gì tôi nghĩ là thực sự được triển khai trong hầu hết các trình duyệt. Điều này dường như hoạt động tốt.

PS: tuyên bố var TouchEvent ở phía dưới không phải là một phần của bản nháp w3c. Nó là một sự thích nghi của cùng một mã cho UIEvent, là một phần của các giao diện chuẩn được gửi kèm với 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

Đây là phụ lục. Mã này thêm các trình xử lý sự kiện kiểu vào HTMLElement. Bạn có thể thêm mã này sau mã xác định giao diện 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; 
}