RxJSオペレーター一覧｜switchMapとmergeMapの違い

RxJS のオペレーターとは、Observable（時間とともに値が流れてくるもの）を受け取り、変換・絞り込み・結合などをして新しい Observable を返す関数です。pipe() の中に並べて使い、Angular では HttpClient・フォーム・ルーターの値を扱う場面で登場します。 RxJS 7.8.2 の rxjs/operators には113個の関数がありますが、ふだん使うのは30個ほどで、迷いやすいのは switchMap・mergeMap・concatMap・exhaustMap の4つの使い分けです。

この記事では、よく使う35個を用途別の早見表にまとめ、すべて RxJS 7.8.2 で実際に値を流して出力を確かめました。4つの Map 系に同じ入力を流したときの出力順を時刻つきで比べ、検索ボックス・二重送信の防止・並列取得・catchError の置き場所の4つの使い方を、コピーして動かせるコードと実行結果で示します。

確認環境：Ubuntu 24.04 / Node.js 24.21.0 / RxJS 7.8.2。Angular のコンポーネント例は Angular 22.2.1（ng new の最小構成）＋ Vitest 5.0.3 で実行しました。Node のスクリプトは npm i rxjs のあと node ファイル名.mjs で動きます。

RxJS オペレーター早見表（用途別35個）

「入力 → 出力」は実際に流して確かめた結果です。時間が関係する行では、次の2つを入力にしています。

• a$：0ms・100ms・200ms に 1 2 3 を流す
• b$：50ms・150ms に x y を流す

作る（作成関数）

変換する

絞り込む・間引く

別の Observable につなぐ（Map 系の4つ）

内側の処理は「150ms 後に受け取った値をそのまま流す」です。

組み合わせる

エラー・後始末・共有

of(1,2,3) の 2 でエラーを投げる map を前に置いています（何もしないと出力は「1 error:boom」）。

オペレーターの基本：pipe に並べて上から順に通す

オペレーターは pipe() の中に並べます。値は上から順に通り、途中で止められた値は下へ流れません。早見表の a$・b$ を作って2つのオペレーターを試す完成形のコードです。

import { combineLatest, debounceTime, from, map, timer, zip } from 'rxjs';

// a$: 0ms・100ms・200ms に 1, 2, 3 を流す ／ b$: 50ms・150ms に 'x', 'y' を流す
const a$ = () => zip(from([1, 2, 3]), timer(0, 100)).pipe(map(([v]) => v));
const b$ = () => zip(from(['x', 'y']), timer(50, 100)).pipe(map(([v]) => v));

// 流れてきた値を1行にまとめて表示する
const show = (name, obs$) => new Promise((resolve) => {
  const out = [];
  obs$.subscribe({
    next: (v) => out.push(JSON.stringify(v)),
    error: (e) => { console.log(name, out.join(' '), 'error:' + e.message); resolve(); },
    complete: () => { console.log(name, out.join(' '), '完了'); resolve(); },
  });
});

await show('debounceTime(150):', a$().pipe(debounceTime(150)));
await show('combineLatest:', combineLatest([a$(), b$()]));

debounceTime(150): 3 完了
combineLatest: [1,"x"] [2,"x"] [2,"y"] [3,"y"] 完了

RxJS 7.8.2 では、作成関数もオペレーターも 'rxjs' からまとめて import できます（この記事のコードはすべてその形で実行しました）。'rxjs/operators' からの import でも同じ結果になります。

switchMap・mergeMap・concatMap・exhaustMap の違いを同じ入力で比べる

4つはどれも「流れてきた値を使って別の Observable（通信など）を始め、その結果を流す」オペレーターです。違いは、処理が終わる前に次の値が来たときの扱いだけです。

比較コード

0ms・100ms・200ms に 1 2 3 を流し、それぞれ 300ms かかる処理につなぎます。finalize で「終了（完了または打ち切り）」も記録します。

import { Subject, timer, map, switchMap, mergeMap, concatMap, exhaustMap, finalize } from 'rxjs';
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

// 「番号 n の注文を取得する」300ms かかる処理。結果を1件流して完了する
const fetchOrder = (n) => timer(300).pipe(map(() => `結果${n}`));

async function run(name, flatten) {
  const start = Date.now();
  const t = () => String(Math.round((Date.now() - start) / 10) * 10).padStart(4) + 'ms';
  const clicks = new Subject();
  const lines = [];
  clicks.pipe(
    flatten((n) => {
      lines.push(`${t()}  開始 ${n}`);
      return fetchOrder(n).pipe(finalize(() => lines.push(`${t()}  終了 ${n}`)));
    }),
  ).subscribe((v) => lines.push(`${t()}  → ${v}`));
  // 0ms, 100ms, 200ms に 1, 2, 3 を流す
  clicks.next(1); await sleep(100); clicks.next(2); await sleep(100); clicks.next(3);
  await sleep(1200);
  console.log(`--- ${name} ---\n` + lines.join('\n'));
}
await run('mergeMap', mergeMap);
await run('switchMap', switchMap);
await run('concatMap', concatMap);
await run('exhaustMap', exhaustMap);

実行結果（時刻は 10ms 単位に丸めています。数十ミリ秒の揺れは実行のたびに変わります）：

--- mergeMap ---
   0ms  開始 1
 100ms  開始 2
 200ms  開始 3
 300ms  → 結果1
 300ms  終了 1
 400ms  → 結果2
 400ms  終了 2
 500ms  → 結果3
 510ms  終了 3
--- switchMap ---
   0ms  開始 1
 100ms  終了 1
 100ms  開始 2
 200ms  終了 2
 200ms  開始 3
 500ms  → 結果3
 500ms  終了 3
--- concatMap ---
   0ms  開始 1
 300ms  → 結果1
 300ms  終了 1
 300ms  開始 2
 600ms  → 結果2
 600ms  終了 2
 600ms  開始 3
 900ms  → 結果3
 900ms  終了 3
--- exhaustMap ---
   0ms  開始 1
 300ms  → 結果1
 300ms  終了 1

結果の読み方

使い分けの判断表

switchMap の「打ち切り」は、前の処理の購読をやめて結果を受け取らなくなる、という意味です。結果を必ず受け取りたい保存や削除には concatMap か exhaustMap が向いています。

検索ボックスを作る：debounceTime＋distinctUntilChanged＋switchMap

入力のたびに検索すると、リクエストが多くなり、結果が前後して表示されることもあります。次の3つを並べるのが定番です。

Node で動かす

検索 API の代わりに、500ms 後に結果を返す関数を使います。

import { Subject, timer, debounceTime, distinctUntilChanged, switchMap, map, tap, finalize } from 'rxjs';
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
const start = Date.now();
const t = () => String(Math.round((Date.now() - start) / 10) * 10).padStart(4) + 'ms';

// 検索 API の代わり。500ms 後に結果を1件返す
let requests = 0;
const search = (word) => {
  requests++;
  console.log(`${t()}  リクエスト開始 "${word}"`);
  return timer(500).pipe(
    map(() => `"${word}" の検索結果`),
    finalize(() => console.log(`${t()}  リクエスト終了 "${word}"`)),
  );
};

const input$ = new Subject();
input$.pipe(
  tap((v) => console.log(`${t()}  入力 "${v}"`)),
  debounceTime(300),          // 300ms 入力が止まったら通す
  distinctUntilChanged(),     // 直前と同じ文字列なら通さない
  switchMap((word) => search(word)), // 新しい検索が来たら前の検索は打ち切る
).subscribe((result) => console.log(`${t()}  → 表示: ${result}`));

// 人が入力する様子を再現する
input$.next('a'); await sleep(100);
input$.next('an'); await sleep(100);
input$.next('ang');                 // ここで 300ms 止まる → 検索
await sleep(400);
input$.next('angu'); await sleep(100);
input$.next('ang');                 // 1文字消して元に戻した → 同じ語なので検索しない
await sleep(400);
input$.next('angular');             // 300ms 後に検索開始
await sleep(400);                   // "angular" の検索が始まって 100ms 後に
input$.next('rxjs');                // 次の語を入力 → 300ms 後に前の検索を打ち切って切り替え
await sleep(1000);
console.log(`入力 7 回 / リクエスト ${requests} 回`);

実行結果：

   0ms  入力 "a"
 110ms  入力 "an"
 210ms  入力 "ang"
 510ms  リクエスト開始 "ang"
 610ms  入力 "angu"
 710ms  入力 "ang"
1010ms  → 表示: "ang" の検索結果
1010ms  リクエスト終了 "ang"
1110ms  入力 "angular"
1410ms  リクエスト開始 "angular"
1510ms  入力 "rxjs"
1810ms  リクエスト終了 "angular"
1810ms  リクエスト開始 "rxjs"
2310ms  → 表示: "rxjs" の検索結果
2310ms  リクエスト終了 "rxjs"
入力 7 回 / リクエスト 3 回

• 入力 7 回に対して、リクエストは 3 回でした。a・an は debounceTime が、戻ってきた ang は distinctUntilChanged が止めています。
• angular の検索は、結果が返る前に rxjs の検索が始まったため、「リクエスト終了 "angular"」が表示なしで出ています（switchMap による打ち切り）。画面に出るのは最後の語の結果だけです。

Angular のコンポーネントで書く

同じ組み合わせを、FormControl の valueChanges と HttpClient で書いた例です。結果は toSignal() で signal にしてテンプレートに出しています。コンポーネントとテストを1つのファイルにまとめてあり、ng new で作ったプロジェクトの src/app/search.spec.ts に置いて ng test --watch=false --reporters=verbose で実行できます。

import { HttpClient, provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TestBed } from '@angular/core/testing';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { catchError, debounceTime, distinctUntilChanged, of, switchMap } from 'rxjs';
import { afterEach, beforeEach, expect, it, vi } from 'vitest';

interface Article { id: number; title: string; }

@Component({
  selector: 'app-article-search',
  imports: [ReactiveFormsModule],
  template: `
    <input [formControl]="keyword" placeholder="記事を検索" />
    <ul>
      @for (a of results(); track a.id) {
        <li>{{ a.title }}</li>
      }
    </ul>`,
})
class ArticleSearch {
  private http = inject(HttpClient);
  keyword = new FormControl('', { nonNullable: true });

  results = toSignal(
    this.keyword.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((q) =>
        this.http.get<Article[]>('/api/articles', { params: { q } }).pipe(
          catchError(() => of([] as Article[])), // 内側で受けるので、次の入力も流れ続ける
        ),
      ),
    ),
    { initialValue: [] as Article[] },
  );
}

beforeEach(() => vi.useFakeTimers());
afterEach(() => vi.useRealTimers());

it('検索ボックス', async () => {
  TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] });
  const fixture = TestBed.createComponent(ArticleSearch);
  const http = TestBed.inject(HttpTestingController);
  const c = fixture.componentInstance;
  const list = () => Array.from((fixture.nativeElement as HTMLElement).querySelectorAll('li')).map((li) => li.textContent);
  fixture.detectChanges();

  // 100ms おきに3回入力
  c.keyword.setValue('a');   await vi.advanceTimersByTimeAsync(100);
  c.keyword.setValue('an');  await vi.advanceTimersByTimeAsync(100);
  c.keyword.setValue('ang'); await vi.advanceTimersByTimeAsync(299);
  console.log('入力3回・最後の入力から 299ms: リクエスト数 =', http.match(() => true).length);
  await vi.advanceTimersByTimeAsync(1);
  const first = http.expectOne((r) => r.url === '/api/articles');
  console.log('300ms 経過: リクエスト先 =', first.request.urlWithParams);

  // 応答が返る前に次の語を入力
  c.keyword.setValue('angular'); await vi.advanceTimersByTimeAsync(300);
  console.log('次の語を入力後: 1件目は打ち切られたか =', first.cancelled);
  const second = http.expectOne((r) => r.url === '/api/articles');
  console.log('2件目のリクエスト先 =', second.request.urlWithParams);
  second.flush([{ id: 1, title: 'Angular 入門' }, { id: 2, title: 'Angular と RxJS' }]);
  fixture.detectChanges();
  console.log('画面の一覧 =', JSON.stringify(list()));

  // サーバーがエラーを返しても、次の検索は動く
  c.keyword.setValue('x'); await vi.advanceTimersByTimeAsync(300);
  http.expectOne((r) => r.url === '/api/articles').flush('error', { status: 500, statusText: 'Server Error' });
  fixture.detectChanges();
  console.log('500 のあとの一覧 =', JSON.stringify(list()));
  c.keyword.setValue('rxjs'); await vi.advanceTimersByTimeAsync(300);
  http.expectOne((r) => r.url === '/api/articles').flush([{ id: 3, title: 'RxJS 早見表' }]);
  fixture.detectChanges();
  console.log('エラー後の再検索の一覧 =', JSON.stringify(list()));
  http.verify();
});

実行結果：

入力3回・最後の入力から 299ms: リクエスト数 = 0
300ms 経過: リクエスト先 = /api/articles?q=ang
次の語を入力後: 1件目は打ち切られたか = true
2件目のリクエスト先 = /api/articles?q=angular
画面の一覧 = ["Angular 入門","Angular と RxJS"]
500 のあとの一覧 = []
エラー後の再検索の一覧 = ["RxJS 早見表"]

HttpClient のリクエストは、switchMap が切り替えた時点で実際にキャンセルされます（cancelled = true）。また、catchError を switchMap の内側に置いているので、サーバーが 500 を返したあとも次の検索が動いています。この「置き場所」は後の章で詳しく比べます。

二重送信を防ぐ：exhaustMap

保存ボタンを連打したときに、リクエストを1回にまとめる例です。300ms かかる保存処理に、50ms 間隔で3回、完了後にもう1回クリックを流します。

import { Subject, timer, exhaustMap, mergeMap, map } from 'rxjs';
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

async function run(name, flatten) {
  const start = Date.now();
  const t = () => String(Math.round((Date.now() - start) / 10) * 10).padStart(4) + 'ms';
  let saved = 0;
  // 保存 API の代わり。300ms かかる
  const save = (n) => { console.log(`${t()}  保存リクエスト送信（${n}回目のクリック）`); return timer(300).pipe(map(() => ++saved)); };
  const click$ = new Subject();
  click$.pipe(flatten((n) => save(n))).subscribe((count) => console.log(`${t()}  → 保存完了（合計 ${count} 件）`));
  console.log(`--- ${name} ---`);
  click$.next(1); await sleep(50); click$.next(2); await sleep(50); click$.next(3); // 連打
  await sleep(500);
  click$.next(4);                                                                   // 完了後にもう一度
  await sleep(400);
}
await run('mergeMap（連打した分だけ送信）', mergeMap);
await run('exhaustMap（処理中のクリックは無視）', exhaustMap);

実行結果：

--- mergeMap（連打した分だけ送信） ---
   0ms  保存リクエスト送信（1回目のクリック）
  50ms  保存リクエスト送信（2回目のクリック）
 100ms  保存リクエスト送信（3回目のクリック）
 310ms  → 保存完了（合計 1 件）
 350ms  → 保存完了（合計 2 件）
 450ms  → 保存完了（合計 3 件）
 610ms  保存リクエスト送信（4回目のクリック）
 910ms  → 保存完了（合計 4 件）
--- exhaustMap（処理中のクリックは無視） ---
   0ms  保存リクエスト送信（1回目のクリック）
 300ms  → 保存完了（合計 1 件）
 600ms  保存リクエスト送信（4回目のクリック）
 900ms  → 保存完了（合計 2 件）

mergeMap では 4 件保存され、exhaustMap では 2 件（最初のクリックと、完了後のクリック）だけです。処理中の 2 回目・3 回目は送信されていません。完了後のクリックはふつうに受け付けるので、「送信中だけ無視する」という動きになります。ボタンを disabled にする表示上の対策と組み合わせると、見た目と動作の両方がそろいます。

複数の API を並列で取得する：forkJoin と mergeMap の同時実行数

import { forkJoin, from, timer, map, mergeMap, concatMap, toArray, tap } from 'rxjs';
const start0 = () => { const s = Date.now(); return () => String(Math.round((Date.now() - s) / 10) * 10).padStart(4) + 'ms'; };
const done = (obs$) => new Promise((resolve) => obs$.subscribe({ complete: resolve }));

// API の代わり。ms ミリ秒後に値を1件返す
const api = (name, ms, t) => timer(ms).pipe(map(() => name), tap(() => console.log(`${t()}  ${name} 取得`)));

let t = start0();
console.log('--- forkJoin: 3つを同時に取得し、全部そろったら1回だけ流す ---');
await done(forkJoin({
  user: api('会員', 300, t),
  orders: api('注文一覧', 200, t),
  notices: api('お知らせ', 100, t),
}).pipe(tap((v) => console.log(`${t()}  → ${JSON.stringify(v)}`))));

t = start0();
console.log('--- concatMap: 1件ずつ順番に取得 ---');
await done(from([1, 2, 3, 4, 5, 6]).pipe(
  concatMap((id) => api(`記事${id}`, 100, t)), toArray(),
  tap((v) => console.log(`${t()}  → ${JSON.stringify(v)}`))));

t = start0();
console.log('--- mergeMap(fn, 2): 同時に2件までで取得 ---');
await done(from([1, 2, 3, 4, 5, 6]).pipe(
  mergeMap((id) => api(`記事${id}`, 100, t), 2), toArray(),
  tap((v) => console.log(`${t()}  → ${JSON.stringify(v)}`))));

t = start0();
console.log('--- forkJoin: 1つでもエラーになると全体がエラー ---');
await new Promise((resolve) => forkJoin([
  api('会員', 100, t),
  timer(50).pipe(map(() => { throw new Error('注文一覧の取得でエラー'); })),
]).subscribe({ next: (v) => console.log(v), error: (e) => { console.log(`${t()}  error: ${e.message}`); resolve(); } }));

実行結果：

--- forkJoin: 3つを同時に取得し、全部そろったら1回だけ流す ---
 100ms  お知らせ 取得
 200ms  注文一覧 取得
 300ms  会員 取得
 300ms  → {"user":"会員","orders":"注文一覧","notices":"お知らせ"}
--- concatMap: 1件ずつ順番に取得 ---
 100ms  記事1 取得
 200ms  記事2 取得
 300ms  記事3 取得
 400ms  記事4 取得
 500ms  記事5 取得
 610ms  記事6 取得
 610ms  → ["記事1","記事2","記事3","記事4","記事5","記事6"]
--- mergeMap(fn, 2): 同時に2件までで取得 ---
 100ms  記事1 取得
 100ms  記事2 取得
 200ms  記事3 取得
 200ms  記事4 取得
 300ms  記事5 取得
 300ms  記事6 取得
 300ms  → ["記事1","記事2","記事3","記事4","記事5","記事6"]
--- forkJoin: 1つでもエラーになると全体がエラー ---
  50ms  error: 注文一覧の取得でエラー

forkJoin は各 Observable が完了したときの最後の値を使うので、完了する Observable（HttpClient の通信など）と組み合わせます。流れ続けるものどうしを組み合わせるときは combineLatest を使います（早見表の「組み合わせる」を参照）。

catchError の置き場所で流れが止まるかどうかが変わる

catchError は「エラーを受けて、代わりの Observable に切り替える」オペレーターです。置く場所によって、そのあとの入力が流れ続けるかどうかが変わります。

import { Subject, of, throwError, switchMap, catchError } from 'rxjs';

// "ng" を渡したときだけエラーになる検索 API の代わり
const search = (word) => (word === 'ng' ? throwError(() => new Error('500 Server Error')) : of(`"${word}" の結果`));

function run(name, build) {
  console.log(`--- ${name} ---`);
  const input$ = new Subject();
  build(input$).subscribe({
    next: (v) => console.log(`  next: ${v}`),
    error: (e) => console.log(`  error: ${e.message}`),
    complete: () => console.log('  complete（これ以降の入力は流れない）'),
  });
  for (const word of ['a', 'ng', 'b', 'c']) {
    console.log(`入力 "${word}"`);
    input$.next(word);
  }
}

run('A. catchError なし', (input$) => input$.pipe(
  switchMap((w) => search(w)),
));

run('B. catchError を外側（switchMap の後ろ）に置く', (input$) => input$.pipe(
  switchMap((w) => search(w)),
  catchError((e) => of(`エラー表示: ${e.message}`)),
));

run('C. catchError を内側（switchMap の中）に置く', (input$) => input$.pipe(
  switchMap((w) => search(w).pipe(
    catchError((e) => of(`エラー表示: ${e.message}`)),
  )),
));

実行結果：

--- A. catchError なし ---
入力 "a"
  next: "a" の結果
入力 "ng"
  error: 500 Server Error
入力 "b"
入力 "c"
--- B. catchError を外側（switchMap の後ろ）に置く ---
入力 "a"
  next: "a" の結果
入力 "ng"
  next: エラー表示: 500 Server Error
  complete（これ以降の入力は流れない）
入力 "b"
入力 "c"
--- C. catchError を内側（switchMap の中）に置く ---
入力 "a"
  next: "a" の結果
入力 "ng"
  next: エラー表示: 500 Server Error
入力 "b"
  next: "b" の結果
入力 "c"
  next: "c" の結果

B で止まるのは、エラーが外側の流れ（入力の Observable）まで届き、catchError が流れ全体を代わりの Observable（of(...)）に切り替えるからです。of(...) は値を1つ流して完了するので、元の入力にはもう戻りません。C では、エラーになった内側の Observable だけが置き換わり、外側の入力は生きたままです。「入力が続く流れでは、catchError は内側に置く」 と覚えておくと、検索が1回エラーになったあと動かなくなる現象を防げます。

RxJS 7 での書き方のメモ

手元の RxJS 7.8.2 の型定義には、次の案内（@deprecated）が書かれています。新しく書くコードでは右側の書き方を選ぶと、次の版に上げるときの手間が減ります。

combineLatestWith と retry({ count: 2, delay: 20 }) は 7.8.2 で動くことを確かめています。この記事で使った作成関数の combineLatest([a$, b$])・merge(a$, b$)・concat(a$, b$)・zip(a$, b$)・forkJoin(...) は、案内の対象ではなく、そのまま使えます。

やりたいこと別の逆引き表

よくある質問

Q. map と switchMap はどう違いますか？ A. map は値を別の値に変えます。switchMap は値から別の Observable（通信など）を始めて、その結果を流します。map の中で Observable を返すと、流れてくる値そのものが Observable になります（of(1).pipe(map(v => of(v * 10))) で確かめると、受け取った値は Observable でした）。そのため、通信につなぐときは Map 系の4つのどれかを使います。

Q. switchMap と mergeMap のどちらを使えばよいですか？ A. 「前の処理の結果はもう要らない」なら switchMap、「全部の結果が必要」なら mergeMap です。検索や画面切り替えは前者、互いに無関係な複数の取得は後者です。比較の実行結果では、switchMap は結果3だけ、mergeMap は結果1〜3がすべて出ました。

Q. debounceTime と throttleTime の違いは？ A. debounceTime は「入力が止まってから」最後の値を通し、throttleTime は「最初の値を通してから」一定時間は通しません。早見表の例では、同じ入力に対して debounceTime(150) は 3 だけ、throttleTime(150) は 1 と 3 を通しました。入力欄には前者、スクロールやボタンの間引きには後者が向いています。

Q. エラーのあと、検索が動かなくなりました。 A. catchError を外側に置いている可能性があります。外側に置くと、代わりの値を流したあと流れ全体が完了します（実行結果の B）。switchMap の中の Observable に catchError を付けると、次の入力も流れ続けます（実行結果の C）。

まとめ

• オペレーターは pipe() に並べ、値は上から順に通る。よく使うのは早見表の35個。
• Map 系の4つの違いは「処理中に次の値が来たとき」：mergeMap は並行、switchMap は打ち切って切り替え、concatMap は順番待ち、exhaustMap は新しいほうを無視。
• 検索ボックスは debounceTime → distinctUntilChanged → switchMap。今回は入力 7 回がリクエスト 3 回になり、HttpClient のリクエストも実際にキャンセルされた。
• 二重送信の防止は exhaustMap。連打 3 回＋完了後 1 回で、送信は 2 回。
• 並列取得は forkJoin、件数が多いときは mergeMap(fn, 同時実行数)。
• catchError は、入力が続く流れでは内側に置く。外側に置くと、1回のエラーで流れが完了する。
• RxJS 7.8 の型定義の案内に合わせ、combineLatestWith や firstValueFrom など新しい書き方を選ぶ。

参考・出典

• RxJS 7.8.2 パッケージ同梱の型定義（rxjs/dist/types）の @deprecated コメント

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。