如何修复 Typescript 可订阅接口错误？

Question

我正在尝试将生产 Angular 应用程序从 7 迁移到 8。当我尝试构建时出现以下错误：

ERROR in app/vehicle/vehicle.component.ts:90:36 - error TS2344: Type 'IOwnerVehicle' does not satisfy the constraint 'ObservableInput<any>'.
Property '[Symbol.iterator]' is missing in type 'IOwnerVehicle' but required in type 'Iterable<any>'.

90             flatMap<IVehicleOwner, IOwnerVehicle>(owner => {
                                      ~~~~~~~~~~~~~

  ../node_modules/typescript/lib/lib.es2015.iterable.d.ts:43:5
    43     [Symbol.iterator](): Iterator<T>;
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    '[Symbol.iterator]' is declared here.

我相信我已经在 RXJS Subscribable documentation 中的 TypeScript Subscribable 接口问题主题 中找到了问题根源的线索。但我仍然无法弄清楚如何解决这个问题。

VSCode 显示车辆组件没有错误。我以为ts文件后面的数字应该代表行和列，但是组件只有50行，第36行是空白。

Subscribable 文档说了一些关于 "TypeScript has problem supporting interfaces with methods defined as symbol properties." 的内容，但 IOwnerVehicle 接口只是一个属性包。它没有方法。

唯一与订阅有关的代码是构造函数

   constructor(@Inject(MAT_DIALOG_DATA) private owner: IVehicleOwner,
      private svc: SearchService,
      private searchDlg: MatDialogRef<OwnerVehicleComponent, IOwnerVehicle>) {
      this.svc.getOwnerVehicles(owner.id.toString()).subscribe(
         list => {
            if (list.length > 0)
               this.list = list;
            else
               this.searchFailed = true;
         });
   }

服务再简单不过了

   getOwnerVehicles(vehicleId: string): Observable<IOwnerVehicle[]> {
      const url = `${this.webApi}/vehicle`;
      return this.http.get<IOwnerVehicle[]>(url,
         {params: {owner : vehicleId}});
   }

谁能帮我弄清楚我需要更改什么或我还需要查看哪些地方？

Answer 1

我们来看看flatMap的类型：

declare function mergeMap<T, O extends ObservableInput<any>>(project: (value: T, index: number) => O, concurrent?: number): OperatorFunction<T, ObservedValueOf<O>>;

如您所见，flatMap 的第二个泛型扩展了 ObservableInput。所以在你的代码中，IOwnerVehicle这似乎是一个简单的接口，实际上应该是ObservableInput<IOwnerVehicle>。

所以只需将您的代码更改为：

flatMap<IVehicleOwner, ObservableInput<IOwnerVehicle>>(owner => {})

你应该可以在vehicle.component.ts第90行第36列

中找到它

如何修复 Typescript 可订阅接口错误？

How do I fix Typescript subcribable interface error?

rxjs

typescript

angular

rxjs6