类型“EventTarget”上不存在属性“value”

Question

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

Answer 1

您需要明确告诉TypeScript作为目标的HTMLElement的类型。

方法是使用泛型类型将其转换为适当的类型：

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./*...*/)

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