在 Angular 下使用 rxjs 的 combineLatest() 保留多个 Observable<T> 的类型？

Question

当我的组件加载时，我需要使用两个服务。两者都需要完成才能继续。这些的完成顺序是随机的，不应该连续组成。设置遵循以下模式。

const observables = [
  this.donkeyService.getDonkey(),
  this.monkeyService.getMonkey()
];

combineLatest(observables)
  .subscribe(([donkeyResult, monkeyResult]) => {
    if (!!donkeyResult && !!monkeyResult) {
      ...
    }
  }

我们注意到结果没有按预期输入。我们花了一段时间才意识到，尽管下面定义了服务器，但 donkeyResult 的类型不是 Donkey！

getDonkey() : Observable<Donkey> { ... }

最后，我意识到当元素被传递到接收数组时，它们失去了类型，因为数组本身是 any[]。所以我们使用铸造来管理它，如下所示。

const observables = [
  this.donkeyService.getDonkey(),
  this.monkeyService.getMonkey()
];

combineLatest(observables)
  .subscribe(([_1, _2]) => {
    const donkeyResult = _1 as Donkey;
    const monkeyResult = _2 as Monkey;

    if (!!donkeyResult && !!monkeyResult) {
      ...
    }
  }

我想重构代码，以便数组将保留服务方法签名指定的类型，并且不会合并成一个公分母 any。

是否可以让 TypeScript and/or Rxjs 有一个数组，其中第一个元素是 Donkey，第二个是 Monkey?我可以使用不同于数组的数据结构吗？

我尝试了（当然失败了）许多不同的方法，包括像这样直接在数组中转换类型。

...
.subscribe(([_1 as Donkey, _2 as Monkey]) => { ... }

有没有保持类型的巧妙方法？我们对完全改变方法持开放态度，因为我们拥有这部分软件并且有一些额外的时间来修改代码。

Answer 1

首先，您必须键入函数和 HTTP 调用。

getMonkey(): Observable<Donkey> {
  return this.http.get<Donkey>(url);
}

完成后，您必须键入您的可观察对象数组：

const observables: [Monkey, Donkey] = [
  this.getMonkey(),
  this.getDonkey(),
];

最后，虽然不是必需的，但您可以输入回调参数：

forkJoin(observables).subscribe(([monkey, donkey]: [Monkey, Donkey]) => {...});

Answer 2

这听起来像是元组的用例。 https://visualstudiomagazine.com/articles/2016/02/01/type-safe-structures.aspx?m=1

type animalTuple = [Donkey, Monkey];

.subscribe(([donkeyResult, monkeyResult]: animalTuple) => { ... }

在 Angular 下使用 rxjs 的 combineLatest() 保留多个 Observable<T> 的类型？

Retain the type of mutiple Observable<T> using combineLatest() from rxjs under Angular?

rxjs

typescript

angular

combinelatest