The program should search for repositories on GitHub by the term entered in the text field, and displays the repositories found by the list. I get an error in the definition of sequence2$ :

Error: Type Observable is not assignable to type Observable

and when subscribing to the sequence2$.subscribe() event:

Error: Argument of type 'string | ResponseModel 'is not assignable to parameter of type' ResponseModel '

Type 'string' is not assignable to type 'ResponseModel'

Tell me how to properly arrange the types.

 import { from, fromEvent, Observable, of } from 'rxjs'; import { debounceTime, distinctUntilChanged, catchError, switchMap, tap } from 'rxjs/operators'; interface ResponseModel { count: number; items: Repositories[]; }; interface Repositories { urlRepo: string; title: string; lang: string; }; const searchField: HTMLInputElement = document.querySelector('.search-field') as HTMLInputElement; const repositories: HTMLUListElement = document.querySelector('.repositories') as HTMLUListElement; const urlGithub: string = 'https://api.github.com/search/repositories'; const errorText: string = 'No found =('; const sequence$ = fromEvent(searchField, 'input'); const clearResult = ():void => { if (repositories) { repositories.innerHTML = ''; } }; const sequence2$: Observable<string | ResponseModel> = sequence$ .pipe( debounceTime(300), distinctUntilChanged(), tap(clearResult), switchMap((event: KeyboardEvent) => request(event) .pipe(catchError(error => of('Error: ${errorText}'))) ) ); sequence2$.subscribe(result => showRepo(result)); function request(event: KeyboardEvent): Observable<Repositories> { const url: string = `${urlGithub}?q=${(event.target as HTMLInputElement).value}`; return from(fetch(url).then(res => res.json())); }; function showRepo(res: ResponseModel) { if (!res.items || !res.items.length) { const error = document.createElement('span'); error.innerText = errorText; repositories.appendChild(error); return; } for (let i=0; i<res.items.length; i++) { const link = document.createElement('a'); link.href = res.items[i].urlRepo; const language = document.createElement('span'); language.innerText = res.items[i].lang; if(repositories) { const listRepo = document.createElement('li'); listRepo.className = "repositories__list"; listRepo.appendChild(link); listRepo.appendChild(language); repositories.appendChild(listRepo); } } } 
 <div class="search"> <input class="search-field" type="text" placeholder="Search"> </div> <ul class="repositories"></ul>

  • create a minimal, self-sufficient and reproducible example and format the code normally, show where the error occurs, the question is incomplete :( - overthesanity
  • Well, so you have a thread generates an event of type string | ResponseModel string | ResponseModel , and showRepo accepts as a parameter a variable of type ResponseModel , a rhetorical error. And besides, the request function returns a stream that generates an event of the Repositories type, you just have a type confusion - overthesanity
  • @overthesanity, tell me, please, how to arrange the types correctly - new_user503

0