☰

プロパティ「value」はタイプ「EventTarget」に存在しません 質問する

tag-icon • tag-icon angular typescript properties
プロパティ「value」はタイプ「EventTarget」に存在しません 質問する

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

以下のコードで「プロパティ 'value' はタイプ '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);
  }
}

ベストアンサー1

ターゲットとなる 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 プロパティを認識します。

同じことはあらゆる種類の HTML 要素に対して実行できます。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);
}

おすすめ記事