La propriété 'valeur' n'existe pas sur le type 'EventTarget'

Question

J'utilise TypeScript version 2 pour un code de composant angulaire 2.

Je reçois l'erreur "La propriété 'valeur' n'existe pas sur le type 'EventTarget'" pour le code ci-dessous, quelle pourrait être la solution. Merci!

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

 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

Vous devez indiquer explicitement à la Machine le type de La cible.

La façon de le faire est d'utiliser un type générique de la convertir en un type approprié:

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

ou (comme vous voulez)

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

ou (encore une fois, question de préférence)

const target = e.target as HTMLTextAreaElement;

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

Cela permettra à la Machine de savoir que l'élément est un textarea et il de la valeur de la propriété.

La même chose pourrait être fait avec n'importe quel type d'élément HTML, chaque fois que vous donner à la Machine un peu plus d'informations à propos de leurs types, il vous rembourse avec les bons conseils et bien sûr, moins d'erreurs.

Pour rendre plus facile pour l'avenir, vous pourriez définir directement un événement avec le type de la cible:

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

Answer 2

Voici l'approche simple que j'ai utilisée:

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

L'erreur affichée par le compilateur TypeScript a disparu et le code fonctionne.

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

Peut-être que quelque chose comme ce qui précède pourrait aider. Changez-le en fonction du code réel. Le problème est ........ cible ['valeur']

Answer 4

Je crois que cela doit fonctionner mais je ne peux pas identifier les moyens. Une autre approche peut être,

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

Answer 5

Voici un autre moyen de spécifier 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);
    }
}