No puedo definir un tipo específico cuando uso FromEvents de RxJS. Cuando canalizo el evento 'keyup' y lo mapeo para obtener el valor ingresado, solo puedo usar (e: any => return (e.target!).value;) . Aunque los depuradores del navegador identifican e como KeyboardEvent , si defino e: KeyboardEvent obtengo un error que indica que "e no contiene el destino de la propiedad". Sin embargo, el código actual funciona, ya que soy nuevo en RxJS + Angular, y la comunidad siempre aconseja evitar usar any , así que me pregunto qué puedo hacer para evitar usarlo en esta situación.
componente.ts
import { TagInterface } from './../../../interfaces/tag/tag-interface'; import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators'; import { fromEvent, Observable } from 'rxjs'; @Component({ selector: 'app-tag-search-bar', templateUrl: './tag-search-bar.component.html', styleUrls: ['./tag-search-bar.component.scss'] }) export class TagSearchBarComponent implements OnInit,AfterViewInit { @Output() tags = new EventEmitter<TagInterface[]>(); @ViewChild('tagInput') tagInputChild!: ElementRef; mappedAndFilteredInput!: Observable<any>; eventKeyUp! : Observable<any>; constructor() { } ngOnInit(): void { } ngAfterViewInit() { this.eventKeyUp = fromEvent(this.tagInputChild.nativeElement, 'keyup'); this.mappedAndFilteredInput = this.eventKeyUp.pipe( map((e: any) => { return (e.target!).value; }), debounceTime(100), distinctUntilChanged(), filter(value => (value != "" && value != undefined)) ); this.mappedAndFilteredInput.subscribe( value => console.log(value), error => console.log(`error: ${error}`), () => console.log('completed maping and filtering tag input term')); } }HTML
<div class="input-group-prepend"> <span class="input-group-text"> <i class="far fa-filter"></i> </span> </div> <input #tagInput type="text" class="filter-tag-list">Esta es la forma segura de obtener el target de un KeyboardEvent
fromEvent<KeyboardEvent>(document.documentElement, 'keyup').subscribe(e => { const [target] = e.composedPath() console.log(target) })Sin embargo, en su caso sería más simple simplemente hacer
fromEvent(this.tagInputChild.nativeElement, 'keyup').subscribe(_ => { console.log(this.tagInputChild.nativeElement.value) })O mejor aún, use un control de formulario y escuche valueChanges en el control de formulario.