Wartość właściwości "nie istnieje dla typu" EventTarget "

Question

Używam TypeScript Version 2 dla kodu Angular 2-składnikowego.

Otrzymuję komunikat "Wartość właściwości" nie istnieje dla typu "EventTarget" "dla poniższego kodu, jakie może być rozwiązanie. Dzięki!

e.target.value.match (/ \ S +/g) || []). Długość

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

Trzeba wyraźnie powiedzieć maszynopis typ HTMLElement która jest twój cel.

Sposobem na to jest przy użyciu typu rodzajowego do oddania go do odpowiedniego typu:

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

To pozwoli maszynopis wiedzieć, że element jest textarea i będzie wiedział o wartości nieruchomości.

To samo można zrobić z dowolnym elementem HTML, gdy tylko podasz TypeScript trochę więcej informacji o ich typach, zwróci ci to z odpowiednimi wskazówkami i oczywiście mniejszą ilością błędów.

Aby ułatwić w przyszłości może chcesz bezpośrednio określić zdarzenie z typem jego cel:

// 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

wierzę, musi pracować, ale wszelkie sposoby, nie jestem w stanie zidentyfikować. Inne podejście może być,

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