資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在TypeScript中修復EventTarget上不存在屬性的錯誤？
TypeScript是一種開源語言，為JavaScript提供可選的靜態型別。它允許開發者透過在編譯時而不是執行時捕獲型別相關的錯誤來編寫更易維護的程式碼。但是，在TypeScript中使用事件監聽器可能會有點棘手。一個常見的問題是“EventTarget上不存在屬性”錯誤。當嘗試訪問TypeScript無法識別的事件目標上的屬性時，就會發生此錯誤。
在本文中，我們將討論如何修復此錯誤，並提供示例來演示如何在TypeScript中使用事件監聽器。
理解錯誤
在我們深入瞭解解決方案之前，瞭解此錯誤發生的原因至關重要。在TypeScript中，EventTarget介面表示任何可以接收事件的物件，例如視窗或HTML元素。但是，並非所有屬性和方法都在EventTarget介面中定義。例如，假設您正在嘗試在事件監聽器中訪問HTML輸入元素的“value”屬性。在這種情況下，TypeScript可能會丟擲“EventTarget上不存在屬性”錯誤，因為EventTarget介面沒有定義“value”屬性。
要修復此錯誤，您需要告訴TypeScript事件目標是HTML元素，並提供該元素的正確介面定義。讓我們來看一些示例來說明如何做到這一點。
示例1：訪問輸入元素的Value屬性
建立一個包含輸入欄位的表單的HTML檔案，如下所示：
index.html
<html lang="en">
<head>
<script src = "test.js"> </script>
</head>
<body>
<form action = "">
<input type = "text">
</form>
</body>
</html>
為了在使用者提交表單時捕獲輸入欄位的值，您可能會編寫這樣的事件監聽器：
const form = document.querySelector('form');
form!.addEventListener('submit', (event) => {
event.preventDefault();
const inputValue = event!.target!.value;
console.log(inputValue);
});
但是，TypeScript可能會丟擲“EventTarget上不存在屬性”錯誤，因為“value”屬性未在EventTarget介面中定義。
要修復此錯誤，您需要告訴TypeScript事件目標是HTMLInputElement。您可以使用型別斷言來實現此目的，如下所示：
test.ts
const form = document.querySelector('form');
form!.addEventListener('submit', (event) => {
event.preventDefault();
const inputValue = (event!.target as HTMLInputElement)!.value;
console.log(inputValue);
});
在此示例中，我們使用“as”關鍵字告訴TypeScript事件目標是HTMLInputElement。現在，TypeScript知道“value”屬性存在於EventTarget上，並且不會丟擲錯誤。
輸出
示例2：使用自定義事件
假設您要定義一個自定義事件並從元素分派該事件。您可能會編寫如下程式碼：
const element = document.querySelector('#my-element');
// Define a custom event
const myEvent = new CustomEvent('my-event', {
detail: {
message: 'Hello, world!'
}
});
// Dispatch the event
element.dispatchEvent(myEvent);
// Handle the event
element!.addEventListener('my-event', (event) => {
const message = (event as CustomEvent).detail.message;
console.log(message);
});
但是，如果您嘗試在事件監聽器中訪問事件的“detail”屬性，TypeScript可能會丟擲“EventTarget上不存在屬性”錯誤，因為“detail”屬性未在EventTarget介面中定義。
要修復此錯誤，您需要告訴TypeScript事件目標是CustomEvent。您可以使用另一種型別的斷言來實現此目的，如下所示：
const element = document.querySelector('#my-element');
// Define a custom event
const myEvent = new CustomEvent('my-event', {
detail: {
message: 'Hello, world!'
}
});
// Dispatch the event
element!.dispatchEvent(myEvent);
// Handle the event
element!.addEventListener('my-event', (event) => {
const message = (event as CustomEvent).detail.message;
console.log(message);
});
在此示例中，我們使用型別斷言告訴TypeScript該事件是CustomEvent。現在，TypeScript知道“detail”屬性存在於事件中，並且不會丟擲錯誤。
輸出
示例3：使用具有多種事件型別的事件監聽器
假設您想監聽元素上的多種型別的事件，例如“click”和“keydown”。您可能會編寫如下程式碼：
const element = document.querySelector("#my-element");
// Handle click events
element!.addEventListener("click", (event) => {
console.log("Clicked!");
console.log(`Clicked at (${MouseEvent.clientX}, ${MouseEvent.clientY})`);
});
// Handle keydown events
element!.addEventListener("keydown", (event) => {
console.log("Keydown!");
console.log(`Key pressed: ${KeyboardEvent.code}`);
});
但是，當您嘗試訪問事件上的屬性（例如“keydown”事件上的“keyCode”屬性）時，TypeScript可能會丟擲“EventTarget上不存在屬性”錯誤，因為EventTarget介面沒有定義這些屬性。
要修復此錯誤，您需要告訴TypeScript該事件是特定型別的事件，例如MouseEvent或KeyboardEvent。
您可以透過在每個事件監聽器中使用型別斷言來實現此目的，如下所示：
const element = document.querySelector('#my-element');
// Handle click events
element.addEventListener('click', (event) => {
const mouseEvent = event as MouseEvent;
console.log(`Clicked at (${mouseEvent.clientX}, ${mouseEvent.clientY})`);
});
// Handle keydown events
element.addEventListener('keydown', (event) => {
const keyboardEvent = event as KeyboardEvent;
console.log(`Key pressed: ${keyboardEvent.code}`);
});
在此示例中，我們使用型別斷言告訴TypeScript該事件是MouseEvent或KeyboardEvent，具體取決於事件型別。透過這樣做，TypeScript可以識別事件上的屬性和方法，並且不會丟擲“EventTarget上不存在屬性”錯誤。
輸出
結論
在TypeScript中使用事件監聽器時，尤其是在監聽多種型別的事件時，可能會出現“EventTarget上不存在屬性”錯誤。要修復此錯誤，您需要透過在每個事件監聽器中使用型別斷言來告訴TypeScript該事件是特定型別的事件。
在本文中，我們提供了三個示例來演示如何修復“EventTarget上不存在屬性”錯誤。我們在每個示例中都使用了型別斷言來提供元素或事件的正確介面定義。透過這樣做，TypeScript能夠識別事件目標上的屬性和方法，並且我們能夠編寫更易維護的程式碼。
請記住負責任地使用型別斷言，並確保程式碼保持安全和可維護。使用這些技術，在TypeScript中使用事件監聽器時，您可以編寫更健壯且無錯誤的程式碼。
6000+ 次瀏覽
