TypeScriptでEvent.targetをElement型にキャストする方法
2024-04-02
TypeScriptにおける Event.target 型と Element 型の違い
問題点
以下のコードのように、Event.target のプロパティに直接アクセスしようとすると、EventTarget 型には存在しないプロパティのため、エラーが発生します。
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const text = event.target.textContent; // エラー: Property 'textContent' does not exist on type 'EventTarget'.
});
解決方法
この問題を解決するには、以下のいずれかの方法で Event.target を Element 型にキャストする必要があります。
型ガードを使用する
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
if (event.target instanceof Element) {
const text = event.target.textContent;
console.log(text); // "ボタンが押されました"
}
});
アサーションを使用する
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const text = (event.target as Element).textContent;
console.log(text); // "ボタンが押されました"
});
as キーワードを使用する
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const text = event.target.textContent as string;
console.log(text); // "ボタンが押されました"
});
これらの方法により、Event.target を Element 型にキャストすることで、プロパティに安全にアクセスできるようになります。
補足
EventTarget型は、イベントの発生元を表す抽象的な型です。Element型は、HTML要素を表す具体的な型です。- TypeScript では、型の安全性のために、型変換が必要な場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Event.target 型と Element 型の違い</title>
</head>
<body>
<button id="button">ボタン</button>
<script>
const button = document.getElementById('button');
// 型ガードを使用する
button.addEventListener('click', (event) => {
if (event.target instanceof Element) {
const text = event.target.textContent;
console.log(text); // "ボタンが押されました"
}
});
// アサーションを使用する
button.addEventListener('click', (event) => {
const text = (event.target as Element).textContent;
console.log(text); // "ボタンが押されました"
});
// `as` キーワードを使用する
button.addEventListener('click', (event) => {
const text = event.target.textContent as string;
console.log(text); // "ボタンが押されました"
});
</script>
</body>
</html>
このコードを実行すると、いずれの方法でも "ボタンが押されました" という文字列がコンソールに出力されます。
- 上記のコードは、イベントリスナーの例です。
Event.target を Element 型にキャストする他の方法
querySelector を使用する
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const element = event.target.closest('button');
if (element) {
const text = element.textContent;
console.log(text); // "ボタンが押されました"
}
});
この方法では、querySelector メソッドを使用して、イベント発生元の要素を取得します。querySelector メソッドは、指定されたセレクターに一致する最初の要素を返します。
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const element = event.currentTarget as HTMLButtonElement;
const text = element.textContent;
console.log(text); // "ボタンが押されました"
});
この方法では、イベントオブジェクトの currentTarget プロパティを使用して、イベントが発生した要素を取得します。currentTarget プロパティは、イベントリスナーが登録された要素を返します。
イベントオブジェクトの composedPath プロパティを使用する
const button = document.getElementById('button');
button.addEventListener('click', (event) => {
const path = event.composedPath();
const element = path.find((element) => element instanceof HTMLButtonElement);
if (element) {
const text = element.textContent;
console.log(text); // "ボタンが押されました"
}
});
この方法では、イベントオブジェクトの composedPath プロパティを使用して、イベント発生元の要素を含む要素の配列を取得します。composedPath プロパティは、イベント伝播の過程でイベントが発生した要素をすべて返します。
これらの方法は、いずれも Event.target を Element 型にキャストする方法として有効です。状況に応じて、適切な方法を選択してください。
補足
- 上記の方法は、いずれもブラウザの互換性を考慮する必要があります。
- 詳細については、ブラウザのドキュメントを参照してください。
typescript event-listener
