TypeScript 1.7.6 版是否支持 touchevents 的 dts lib？

Question

我找到了以下链接： Does TypeScript support TouchEvent?

它处理我遇到的问题。根据文章顶部的一篇文章，它指出 TypeScript 1.5.3 在 lib.d.ts 中添加了 HTML Touch 事件的声明。

TypeScript 1.7.6 版是否支持这些触摸事件？我在 Visual Studio 2015 中收到一条错误消息，指出：“事件”类型上不存在属性“changedTouches”。

需要什么 lib.d.ts 才能使其工作。我曾尝试使用 NuGet 下载最新的 jquery.TypeScript.DefinitelyTyped 版本="2.8.8"，但这似乎不起作用。

有什么建议吗？

更新 我验证了来自 NuGet 的 jquery d.ts 文件与 https://github.com/DefinitelyTyped/DefinitelyTyped 上的文件相同。

代码片段

$('#previewEvent').on('mousedown touchstart', function(e) {
 var original = e.originalEvent;
 if (original.changedTouches && CheckMobile.isTouch_p) {
     const touchobj = original.changedTouches[0];
     swipedir = 'none';
     distX = 0;
     distY = 0;
     startX = touchobj.pageX;
     startY = touchobj.pageY;
     // record time when finger first makes contact with surface
     startTime = new Date().getTime();
     return !0;
} else if (!CheckMobile.isTouch_p) {
     return !0;
 }
 return !0;
});

更新 我最初认为 lib.d.ts 指的是 jQuery。我错了，它是随 TypeScript 一起安装的库之一。

我已经更新了库，但仍然有同样的错误。 lib.d.ts 文件似乎确实有触摸定义，这是朝着正确方向迈出的一步。

问题似乎是 jQuery BaseJQueryEventObject 接口和 TypeScript TouchEvent 接口之间的不兼容。我还不确定如何解决这个问题，但我可以通过声明 var original: any = e.originalEvent 来消除错误，它掩盖了不兼容性。

关于如何以正确方式解决此问题的任何想法？我猜这需要第三个 d.ts 文件才能解决接口问题。

谢谢...

Answer 1

在您的处理函数中，e 的类型为 JQueryEventObject。

originalEvent 来自BaseJQueryEventObject，它的类型是Event。这个Event 是我们回到 lib.d.ts 的地方。到目前为止一切都清楚了。

因为Event 是许多派生事件类型（如GamepadEvent、MutationEvent 等）的基本接口，所以它只包含所有这些事件类型之间共享数据的字段。这就是您无法访问 changedTouches 的原因，因为就 TypeScript 编译器而言，它不是 TouchEvent。

我将使用 TypeScript 1.4 中引入的一个名为 type guards 的功能来解决这个问题。

JavaScript 中的一个常见模式是使用 typeof 或 instanceof 在运行时检查表达式的类型。 TypeScript 现在可以理解这些条件，并且在 if 块中使用时会相应地更改类型推断。

因为您为mousedown 和touchstart 事件指定相同的处理程序，所以e.originalEvent 可以是MouseEvent 或TouchEvent。

所以你必须处理这两种情况：

$("#previewEvent").on("mousedown touchstart", function(e) {
    var original = e.originalEvent;
    if(original instanceof TouchEvent) {
        // Handling the touchstart event
    } else if(original instanceof MouseEvent) {
        // Handling the mousedown event
    }
});

正如引用所说，好处是您将在 if 语句的每个分支中获得适当的自动完成支持。