RxJs：类型 'unknown[]' 不可分配给类型 'Course[]'

Question

出于某种原因，我无法在可观察对象 courses$.

的 pipe() 运算符中使用 shareReplay()

下面是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'))
        )

当我尝试运行时出现此错误：

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.

但是每当我从 courses$ 中的 pipe() 中删除 shareReplay() 时，它都会起作用。这里可能是什么问题？我希望能够毫无错误地使用 shareReplay()。

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>

以上是HTML和CSS供参考。当我删除 shareReplay() 时，它工作没有任何问题。我正在观看使用与此相同代码的教程，但它运行没有任何问题，这与我的不同。

Answer 1

所以，事实证明，我所要做的就是像这样使用 shareReplay()：

shareReplay<Course[]>

现在，它开始工作了！

RxJs：类型 'unknown[]' 不可分配给类型 'Course[]'

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

angular

rxjs

rxjs-observables

rxjs-pipeable-operators