Edited at

TypescriptでaddEventListener時のEventTarget型ではまった

Typescriptでイベント発生元の情報を取りたい時に、Javascriptのノリで書いていたら怒られた

具体的には下記

inputのvalueをとろうとしたら、んなもんねぇよ!と怒られた


あれ・・・valueがいない・・・

var element = document.createElement('input');

element.value = 'test';
element.addEventListener('click', function(event: MouseEvent) {
alert(event.target.value); // Property 'value' does not exist on type 'EventTarget'.
}, false);
element.click();

EventTargetにはHTMLElementが必ずしも来るわけでないらしい

https://developer.mozilla.org/ja/docs/Web/API/EventTarget


Element, document, and window are the most common event targets, but other objects can be event targets too, for example XMLHttpRequest, AudioNode, AudioContext, and others.


targetにHTMLElementが来る用のinterfaceを用意して解決した


欲しいHTMLElementを指定したinterface

interface HTMLElementEvent<T extends HTMLElement> extends Event {

target: T;
}

var element = document.createElement('input');
element.value = 'test';
element.addEventListener('click', function(event: HTMLElementEvent<HTMLInputElement>) {
alert(event.target.value); // 補完できるヤッター
}, false);
element.click();


Demo