我正在將 TypeScript 用于 Vue.js 應用程式，并且我正在嘗試使用 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：
“事件”型別上不存在屬性“資料傳輸”
原因是函式的event引數需要一個沒有屬性的物件。dropEventdataTransfer
但是，我希望它drop()應該總是期待 a DragEvent，但這是在外部庫中設定的，所以我無法控制它。
如何在 TypeScript 中正確處理這個問題？就像添加類似的東西一樣簡單if (typeof(event) !== DragEvent)嗎？或者有沒有更好的方法讓 TypeScript 將其識別為DragEvent? 這只是最好忽略警告的情況嗎？
我試圖了解處理此問題的最佳實踐方法是什么。
uj5u.com熱心網友回復：
你有正確的想法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")
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/493259.html
標籤：javascript 打字稿 Vue.js