Лучший способ объединения данных из нескольких наблюдаемых Rx JS

Question

В моем ngOnInit () есть следующее:

  ngOnInit() {
    const exerciseObs = this.wodService.getAllExercises().pipe(take(1), map(data => {
      return {exercises: data};
    }));
    const userObs = this.accountService.getAccountInformationObservable().pipe(take(1), map(data => {
      return {user: data};
    }));

    forkJoin([exerciseObs, userObs]).subscribe(data => {
      this.exercises = data[0].exercises as unknown as Exercise[];
      this.user = data[1].user as unknown as CWUser;
    });
  }

Объединение вывода двух наблюдаемых объектов и последующее присвоение данных двум свойствам компонентов. Как мне нужно преобразовать в неизвестное, а затем тип кажется неуместным, но я не могу найти другой способ объединить их, не прибегая к switchMap и объединяя данные там. Кажется, что это более чистый и плоский подход, но данные, возвращаемые в виде массива, и их странное преобразование кажутся неправильными.

Что мне здесь не хватает?

Answer 1

Вы можете немного очистить это и сделать его безопасным для типов - нет необходимости в гимнастике, которую вы делаете с data, если вы используете деконструкцию кортежа, возвращаемого forkJoin:

ngOnInit() {
  const exerciseObs = this.wodService.getAllExercises().pipe(take(1));
  const userObs = this.accountService.getAccountInformationObservable().pipe(take(1));

  forkJoin([exerciseObs, userObs]).subscribe({
    next: ([exercises, user]) => {
      this.exercises = exercises;
      this.user = user; 
    }
  });
}

Stackblitz для этого . Проверить hello.component.ts.

Answer 2

Если вы предоставляете типы при объявлении обеих вышеупомянутых констант, не будет необходимости выполнять какое-либо явное утверждение типа при подписке на forkjoin обеих наблюдаемых.

const exerciseObs: Observable<Exercise[]> = this.wodService.getAllExercises()
  .pipe(
    take(1), 
    map(data => ({
      exercises: data,
    }))
);
const userObs: Observable<userObs>  = this.accountService.getAccountInformationObservable()
  .pipe(
    take(1), 
    map(data => ({
      user: data,
    }))
);