[解決済み】タイプ 'EventTarget' にプロパティ 'value' が存在しない。

質問

Angular 2のコンポーネントコードにTypeScript Version 2を使用しています。

以下のコードで、エラー "Property 'value' does not exist on type 'EventTarget'" が発生します。ありがとうございます。

e.target.value.match(/\S+/g) || []).length

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'text-editor',
  template: `
    <textarea (keyup)="emitWordCount($event)"></textarea>
  `
})
export class TextEditorComponent {
  @Output() countUpdate = new EventEmitter<number>();

  emitWordCount(e: Event) {
    this.countUpdate.emit(
            (e.target.value.match(/\S+/g) || []).length);
  }
}

解決方法は？

ターゲットとなるHTMLElementの型をTypeScriptに明示的に伝える必要があります。

その方法は、一般的な型を使って適切な型にキャストすることです。

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

または（お好みで）

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

または (これも好みの問題ですが)

const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

これは、TypeScriptに、その要素が textarea で、valueプロパティを知ることができます。

TypeScriptに型についてもう少し情報を与えると、適切なヒントで返してくれるし、もちろんエラーも少なくなる。

将来的には、イベントを直接ターゲットの型として定義することも可能です。

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}