Property 'filter' does not exist on type 'unknown' Observable<Course[]> in Rxjs 6

Question

As I'm trying to use filter like this.

    beginnerCourses$: Observable<Course[]>;
    advancedCourses$: Observable<Course[]>;

    ngOnInit() {

      const http$ = createHttpObservables('/api/courses');

    const courses$ = http$.pipe(
      map(res => Object.values(res["payload"]))
    )

      this.beginnerCourses$ = http$
      .pipe(
          map(courses => courses
              .filter(course => course.category == 'BEGINNER')) //here problem is showing
      );
      
      this.advancedCourses$ = http$
      .pipe(
        map(courses => courses
          .filter(course => course.category == 'ADVANCED')) //here problem is showing
      );

      courses$.subscribe(courses => {
        this.beginnerCourses$ = courses.filter(course => course.category == 'BEGINNER'); //its working here
        this.advancedCourses$ = courses.filter(course => course.category == 'ADVANCED'); //its working here
      }, noop,
      () => console.log('completed'));
    }

The problem is Property 'filter' does not exist on type 'unknown' for
map(courses => courses.filter(course => course.category == 'BEGINNER'))) and
map(courses => courses.filter(course => course.category == 'ADVANCED')))

As i'm enrolled in a course it shows this way and in his tutorial its working. But i don't know what i'm missing here.

Update 1: Used it.

.pipe(
  map((courses: any[]) => courses.filter(
    course => course.category == 'BEGINNER')
  )
);

But in Edge Console it shows.

ERROR TypeError: courses.filter is not a function

Answer 1

I was doing this tutorial and ran across the same problem.

I found that you need to specify the type for the courses$ observable:

const courses$: Observable<Course[]> = http$.pipe( map(res => Object.values(res["payload"])) )

But you also need to specify the courses$ observable and not the http$ observable when you assign it to beginnerCourses$ as below:

 this.beginnerCourses$ = courses$
 .pipe(
     map(courses => courses
         .filter(course => course.category == 'BEGINNER')) 
 );

Answer 2

This is a typescript error, it means that map doesn't know the type of observable it's transforming.

You can give typescript the typing informaiton a few different ways.

Try:

.pipe(
  map((courses: any[]) => courses.filter(
    course => course.category == 'BEGINNER')
  )
);

Answer 3

Found the answer.

const http$: Observable<Course[]> = createHttpObservables('/api/courses');

referred it from the course github extra added is.

.pipe(
        map(res => Object.values(res["payload"]))
      )

with http$. It required this Observable<Course[]> for using filter.

Answer 4

add Observable<Course[]> to courses$

const courses$: Observable<Course[]> = http$.pipe(
  map(res => Object.values(res["payload"]))
)