どんな問題?
JSっぽくこんな風に書くと「EventTargetの中にそんなプロパティないよ」とTypeScript先生に怒られてしまいます。
const element = document.querySelector("#piyopiyo");
element!.addEventListener("click", (e) => {
let target = e.target;
console.log(target.innerText);
})
// エラー!
// Property 'innerText' does not exist on type 'EventTarget'.
解決方法
as HTMLElement
でキャストすることで解決できます。これが一番簡単だと思います。
const element = document.querySelector("#piyopiyo");
element!.addEventListener("click", (e) => {
let target = e.target as HTMLElement; // <-- ココ!
console.log(target.innerText);
})
参考
javascript - error " Property 'innerText' does not exist on type 'EventTarget' "? - Stack Overflow
他の解決方法のご紹介(interfaceの利用)
TypescriptでaddEventListener時のEventTarget型ではまった - Qiita
原因
「EventTargetはHTMLElementじゃないからダメ」というお話みたいです。
JavaScriptの場合はEventTargetでもHTMLElementのプロパティをそのまま使えましたが、TypeScriptの場合は一度明示的にキャストする必要があるみたいです。
TypescriptでaddEventListener時のEventTarget型ではまった - Qiita
EventTarget - Web API | MDN