javascript - როგორ ავიცილოთ 'any'-ის გამოყენება When using FromEvent RxJS Angular-თან ერთად, რომ შევიძინოთ input ტეგის მნიშვნელობის ცვლილებებზე გამოწერა?

მე ვერ ვუსაზღვრავ კონკრეტულ ტიპს, როცა ვხმარობ FromEvents RxJS-დან. როცა ვადნობ 'keyup'-ის მოვლენას და ვაკეთებ მასში map-ს, რომ მივიღო შეყვანილი მნიშვნელობა, შემიძლია გამოიყენო მხოლოდ (e: any => return (e.target!).value;). მიუხედავად იმისა, რომ ბრაუზერის დებაგერები ამოწმებენ, რომ e არის KeyboardEvent, თუ გავუსაზღვრებ e: KeyboardEvent მივიღებ შეცდომას, რომელიც ამბობს, რომ "e არ შეიცავს თვისებას target". არსებული კოდი მუშაობს, თუმცა, რადგან მე ახალი ვარ RxJS + Angular-ში, და საზოგადოება ყოველთვის ურჩევს any-ის გამოყენების თავიდან აცილებას, მაინტერესებს, რა შემიძლია გავაკეთო, რომ ამ სიტუაციაში არასაჭირო გახდეს მისი გამოყენება?

Component.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">

პასუხი #1

ეს არის ტიპის უსაფრთხო გზა KeyboardEvent-დან target მიღებისათვის

    fromEvent<KeyboardEvent>(document.documentElement, 'keyup').subscribe(e => {
      const [target] = e.composedPath()
      console.log(target)      
    })

თუმცა, თქვენს შემთხვევაში უფრო მარტივი იქნება უბრალოდ გააკეთოთ

fromEvent(this.tagInputChild.nativeElement, 'keyup').subscribe(_ => {
  console.log(this.tagInputChild.nativeElement.value)
})

ან უკეთესია გამოიყენოთ ფორმის კონტროლი და ისმინოთ valueChanges ფორმის კონტროლზე.