プロパティ「値」はタイプ「EventTarget」に存在しません

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

以下のコードで「プロパティ '値'はタイプ '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は要素がa textareaであることを認識し、valueプロパティを認識します。

TypeScriptにそれらの型に関する情報をもう少し与えると、適切なヒントと、もちろんエラーが少なくなるので、どんな種類のHTML要素でも同じことができます。

将来のために簡単にするために、ターゲットのタイプでイベントを直接定義することができます。

// 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);
}

これが私が使った簡単なアプローチです：

const element = event.currentTarget as HTMLInputElement
const value = element.value

TypeScriptコンパイラーによって示されるエラーはなくなり、コードは機能します。

fromEvent<KeyboardEvent>(document.querySelector('#searcha') as HTMLInputElement , 'keyup')
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      map(e  => {
            return e.target['value']; // <-- target does not exist on {}
        })
    ).subscribe(k => console.log(k));

たぶん上記のようなものが助けになるでしょう。実際のコードに基づいて変更してください。問題は........ target ['value']です

私はそれはうまくいくはずだと信じていますが、私が特定できない方法があります。他のアプローチは、

<textarea (keyup)="emitWordCount(myModel)" [(ngModel)]="myModel"></textarea>


export class TextEditorComponent {
   @Output() countUpdate = new EventEmitter<number>();

   emitWordCount(model) {
       this.countUpdate.emit(
         (model.match(/\S+/g) || []).length);
       }
}

ここに私が使用した別の簡単なアプローチがあります。

    inputChange(event: KeyboardEvent) {      
    const target = event.target as HTMLTextAreaElement;
    var activeInput = target.id;
    }

少し異なる方法で問題を検索する2つの質問に到達したので、ここで問題が発生する場合に備えて、私の回答を複製します。

呼び出された関数では、タイプを次のように定義できます。

emitWordCount(event: { target: HTMLInputElement }) {
  this.countUpdate.emit(event.target.value);
}

これtargetは、最も一般的なケースであるプロパティにのみ関心があることを前提としています。の他のプロパティにアクセスする必要がある場合event、より包括的なソリューションには、&タイプ交差演算子の使用が含まれます。

event: Event & { target: HTMLInputElement }

より具体的にすることもでき、使用HTMLInputElementする代わりに、たとえばHTMLTextAreaElementテキストエリアに使用できます。

次に指定するもう1つの方法を示しますevent.target。

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({ target = {} as HTMLTextAreaElement }) { // <- right there

        this.countUpdate.emit(
          // using it directly without `event`
            (target.value.match(/\S+/g) || []).length);
    }
}