Type '{ typecode: string; }[]' is not assignable to type 'string[]'. // Angular 9.1.15, TypeScript

Question

I do not have good idea about angular, i am learning. Below i have attached my TS file. I am working on Auto complete search/Type ahead search and i am facing these errors.

<----------------Code-------------------->

import { Component, OnInit } from '@angular/core';   
import { Title } from '@angular/platform-browser';    
import { FormControl } from '@angular/forms';    
import { Observable } from 'rxjs';    
import { map, startWith } from 'rxjs/operators';    


import { BciImprintComponent, LogoutComponent, ModalWindowService, NavigationService, SidebarNavItem, } from '@bci-web-core/core';


@Component({   
  selector: 'app-root',   
  templateUrl: './app.component.html',   
  styleUrls: ['./app.component.scss']   
})   
export class AppComponent implements OnInit {   
  //options: string[] = ['CytroPac', 'CytroBox', 'GoPakTM'];    
  objectOptions = [   
    { typecode: 'CytroPac' },   
    { typecode: 'CytroBox' },   
    { typecode: 'GoPakTM' }   
  ];   
  myControl = new FormControl();   
  filteredOptions: Observable<string[]>;   

  title = 'Your application';   
  sidebarLinks: SidebarNavItem[] = [];   
  sidebarFooterLinks: SidebarNavItem[] = [   
    {   
      title: 'Maja Mustermann',   
      overlay: {   
        component: LogoutComponent,   
        config: { title: 'Do you want to logout?', onLogout: () => this.logout() }   
      },   
      icon: 'Bosch-Ic-user'   
    },   
    {   
      id: 'imprint',   
      cb: () => this.onAbout(),   
      title: 'Imprint',   
      icon: 'Bosch-Ic-information'   
    }   
  ];   

  constructor(private titleService: Title,   
              private navigationService: NavigationService,   
              private modalWindowService: ModalWindowService) {   
  }   

  ngOnInit() {   
    this.titleService.setTitle(this.title);   
    this.getSidebarLinks().subscribe(sidebarLinks => this.sidebarLinks = sidebarLinks);   
    this.filteredOptions = this.myControl.valueChanges.pipe(   
      startWith(''),   
      map(value => this._filter(value))   
    );   
  }   

  private _filter(value: string): string[] {   
    const filterValue = value.toLowerCase();   
    return this.objectOptions.filter(option =>   
      option.toLowerCase().includes(filterValue)   
    );   
  }      

  getSidebarLinks(): Observable<SidebarNavItem[]> {  
    return this.navigationService.getNavigationItems();   
  }   
 

  onAbout() {   
    this.modalWindowService.openDialogWithComponent(BciImprintComponent);   
  }  
  

}   

<-------------------Error------------------------>

src/app/app.component.ts:65:5 - error TS2322: Type '{ typecode: string; }[]' is not assignable to type 'string[]'. Type '{ typecode: string; }' is not assignable to type 'string'.

 return this.objectOptions.filter(option =>
   
  option.toLowerCase().includes(filterValue)

 );

src/app/app.component.ts:66:14 - error TS2339: Property 'toLowerCase' does not exist on type '{ typecode: string; }'.

 option.toLowerCase().includes(filterValue)
      

Answer 1

Based on the type definitions, I'd guess you're passing a string and want to filter the array of objects based on it. You'd then need to return array of objects instead of array of strings.

You could use Array#map with Array#filter. Try the following

private _filter(value: string): string[] {   
  const filterValue = value.toLowerCase();
  return this.objectOptions
    .map(objectOption => objectOption.option) // produces ['CytroPac', 'CytroBox', 'GoPakTM']
    .filter(option => option.toLowerCase().includes(filterValue))
    .map(option => ({ typecode: option }));   // map back to array of objects
}      

Or to use your existing implementation of the _filter function, you could use the commented out options variable (array of strings) instead of the array of objects objectOptions.

Update: using only Array#filter

See the comment by @Random below to use only the Array#filter without the need for redundant Array#maps.