在TypeScript中使用JavaScript库时， Handling属性不存在

Question

我正在为Vue.js应用程序使用TypeScript，我试图使用drop事件来触发上传图像，像这样:

handleDOMEvents: {
drop(view, event) {
const hasFiles = event.dataTransfer
&& event.dataTransfer.files
&& event.dataTransfer.files.length;
if (hasFiles) {
upload(event.dataTransfer.files);
}
}
}

(我遵循的完整指南是:https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521)

代码可以工作，但是TypeScript在.dataTransfer行上给出了警告:

属性' datattransfer '在类型'Event'上不存在

原因是drop函数的event参数期望得到一个没有dataTransfer属性的Event对象。

然而，我希望drop()应该总是期望DragEvent，但这是在外部库中设置的，所以我无法控制它。

如何在TypeScript中正确处理这个问题?是像添加if (typeof(event) !== DragEvent)一样简单吗?或者有更好的方法让TypeScript将其识别为DragEvent?这只是一个最好忽略警告的例子吗?

我正在努力理解处理这个问题的最佳实践方法是什么。

Answer 1

你对if (typeof(event) !== DragEvent)的想法是正确的，除了TS类型在运行时不存在，所以你不能像那样检查它们。

要做到这一点，方法是在字段event.type: 上创建自定义类型保护。

function isDragEvent(e: Event): e is DragEvent {
return e.type === "drag";
}

你可以用它作为条件:

drop(view, event) {
if(isDragEvent(event)){
// TS recognizes that event is a DragEvent and has a dataTransfer member
const hasFiles = event.dataTransfer
&& event.dataTransfer.files
&& event.dataTransfer.files.length;
if (hasFiles) {
upload(event.dataTransfer.files);
}

} else {
throw new Error("the passed event is not a DragEvent")
}
}