Свойство 'value' не существует в типе 'EventTarget'

Я использую TypeScript Версия 2 для кода компонента Angular 2.

Я получаю ошибку. "Значение свойства" не существует в типе "EventTarget" для кода ниже, что может быть решением. Спасибо!

e.target.value.match(/\ S +/g) || []). Длина

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

Вы должны явно указать 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./*...*/)

Это даст TypeScript знать, что элемент является 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);
}

Ответ 2

Вот простой подход, который я использовал:

let element = event.currentTarget as HTMLInputElement;
let value = element.value;

Ошибка, показанная компилятором TypeScript, исчезла, и код работает.

Ответ 3

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']

Ответ 4

Я считаю, что он должен работать, но никак не могу определить. Другой подход может быть,

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

Ответ 5

Вот еще один способ указать 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);
    }
}