هل يدعم TypeScript حدث اللمس؟

تحديث

أضاف TypeScript 1.5.3 التصريحات لأحداث اللمس في HTML إلى lib.d.ts

يمكنني أن أرى أنه يدعم UIEvent، لكنه لا يبدو أن لديه واجهات لأحداث اللمس.

يشير هذا الرمز إلى أن "TouchEvent غير موجود في النطاق الحالي."

class Touchy {
    private _element:Element;

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

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

أستطيع استخدام UIEvent، لكن لا أستطيع استخدام TouchEvent. كيف يمكنني التعامل مع TouchEvent باستخدام TypeScript؟ شكرًا.

الإجابة رقم 1

منذ TypeScript 3.7.7، يتم دعم TouchEvent في lib.dom.d، انظر TouchEvent. لا يزال من المفيد الرجوع إلى مواصفات Touch Events الخاصة بـ W3C لفهم إعلانات TypeScript بشكل أفضل.

الإجابة الأصلية: شكرًا على النصيحة. ذهبت إلى مسودة العمل لمواصفات أحداث اللمس W3C بتاريخ 05 مايو 2011 وأنشأت مجموعة من التصريحات المحيطة بناءً عليها. هناك توصية مرشحة أكثر حداثة، لكن هذا ما أعتقد أنه مطبق فعليًا في معظم المتصفحات. يبدو أن هذا يعمل بشكل جيد.

ملاحظة: إعلان المتغير 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;
}

الإجابة رقم 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")));