CODEWITHSUNDEEP
angularrxjsrxjs-observablesrxjs-pipeable-operators
ab1004
ab1004

Reputation: 137

RxJs: Type 'unknown[]' is not assignable to type 'Course[]'

For some reason, I'm unable to use shareReplay() inside the pipe() operator in the observable, courses$.

Below is the home.component.ts

import {Component, OnInit} from '@angular/core';
import {Course} from "../model/course";
import { Observable } from 'rxjs';
import {interval, noop, of, timer} from 'rxjs';
import {catchError, delayWhen, map, retryWhen, shareReplay, tap} from 'rxjs/operators';
import { createHttpObservable } from '../common/util';



@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
beginnerCourses$: Observable<Course[]>;

advancedCourses$: Observable<Course[]>;


constructor() {

}

ngOnInit() {

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

    const courses$: Observable<Course[]> = http$
        .pipe(
            tap(() => console.log('HTTP request')), // tap() operator is used to produce the side effects in our obsevable chain. Whenever we want to update something outside of our observable chain, we use the tap() operator.
            map(res => Object.values(res['payload'])),
            shareReplay()
        ); // Whenever we want to derive new observables from existing observables, we need to use one of the RxJs operators, the pipe() operator. The pipe() function is what allows us to chain multiple operators in order to produce a new observable.

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

    this.advancedCourses$ = courses$
        .pipe(
            map(courses => courses.filter(course => course.category == 'ADVANCED'))
        )

I get this error when I try to run it:

Error: src/app/home/home.component.ts:30:15 - error TS2322: Type 'Observable<unknown[]>' is not assignable to type 'Observable<Course[]>'.
  Type 'unknown[]' is not assignable to type 'Course[]'.
    Type '{}' is missing the following properties from type 'Course': id, description, iconUrl, courseListIcon, and 3 more.

But whenever I remove the shareReplay() from the pipe() in the courses$, it works. What could be the problem here? I want to be able to use shareReplay() without any errors.

home.component.html


.courses-panel {
    max-width: 400px;
    margin: 0 auto;
}
<div class="courses-panel">

  <h3>All Courses</h3>

  <mat-tab-group>

    <mat-tab label="Beginners">

      <courses-card-list [courses]="beginnerCourses$ | async">
        <!--What "async" pipe does is, it's going to subscribe to this observable "beginnerCourses$" and it's going to retrieve that data and assign it to the "[courses]".-->

      </courses-card-list>

    </mat-tab>

    <mat-tab label="Advanced">

      <courses-card-list [courses]="advancedCourses$ | async"></courses-card-list>

    </mat-tab>

  </mat-tab-group>



</div>

Above is the HTML and CSS for reference. It's working without any problems when I remove shareReplay(). I'm watching a tutorial that's using the same code as this but it runs without any problem, unlike mine.

Upvotes: 0

Views: 1081

Answers (1)

ab1004
ab1004

Reputation: 137

So, it turned out, all I had to do was to use shareReplay() like this:

shareReplay<Course[]>

And now, It's working!

Upvotes: 4

Related Questions