TypeScript で Rx​​JS を使用する

1. TypeScript 非同期実行
2. RxJS を使用したリアクティブプログラミング
3. TypeScript で Rx​​JS をセットアップする
4. TypeScript 内で RxJS を消費する

TypeScript は JavaScript 言語のスーパーセットであり、JavaScript が提供する他のすべての機能を維持しながら、静的型付けと型チェックをサポートします。高度で広く使用されている機能の 1つは、非同期プログラム実行です。

現代のアプリケーションは、高度にインタラクティブで消費者志向です。したがって、ほとんどの情報は非同期で利用できます。

TypeScript では、コールバック、Promise、イベントなどの非同期ロジックを処理するためのいくつかの手法を利用できます。

TypeScript 非同期実行

コールバック関数は、非同期コードを処理するために使用された最も古い手法でした。エラーをキャッチする適切な方法がない、コールバック地獄を導入する、メンテナンスの問題など、コールバックにはいくつかの欠点がありました。

したがって、約束の概念が導入されました。promise は、非同期操作が成功または失敗する可能性のある最終的な結果を生成する実際の promise を模倣しています。

TypeScript では、promise オブジェクトは、resolve および reject という名前の 2つのパラメーターを持つ関数を受け入れて、promise を保持または失敗します。これは非同期プログラミングの大きなステップですが、コールバック地獄の問題はまだ残っています。

パブリッシュ/サブスクライバー手法は、非同期イベントを処理するもう 1つの一般的な方法です。オブジェクトの状態が変化するたびに、サブスクライバーまたはオブザーバーに通知が送信されます。

これは、コールバックよりも非同期操作を処理する高度な方法ですが、一連のイベントをサブスクライブしてそれらを順番に処理できない、イベントが永久に失われる可能性があるなど、いくつかの欠点があります。

RxJS を使用したリアクティブプログラミング

前述のように、イベント処理は迷路から抜け出す方法を見つけるようなものです。したがって、イベント駆動型アプリケーションの実装は面倒でした。

したがって、リアクティブプログラミング手法が導入されました。これにより、非同期コードの実行と TypeScript でのイベント駆動型プログラムの実装が簡素化されました。

それは Observable の概念に依存しています。さらに、オブザーバーとイテレーターのパターンが使用されています。

TypeScript で Rx​​JS をセットアップする

まず、Node.js プロジェクトを作成する必要があります。Node.js は公式サイトからインストールできます。

Node.js をインストールすると、自動的に NPM が設定されます。次のように package.json ファイルを生成してみましょう。

npm init

Node プロジェクトの追加の詳細を入力し、今のところデフォルトのものに固執するように求められます。

RxJS ライブラリは NPM パッケージとして利用できます。したがって、次のように npm を使用してインストールできます。

npm install rxjs
OR
npm i rxjs

個別の node_modules フォルダーを作成して、RxJS モジュールを含むすべてのサードパーティの依存関係を保持します。

次に、TypeScript コンパイラのいくつかの基本的な構成を保持する TypeScript 構成ファイルを生成する必要があります。

tsc --init

これにより、tsconfig.json という新しい JSON ファイルが生成されます。以下のエントリを追加してみましょう。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "files": [
    "rxjstest.ts",
  ]
}

ここで、files 配列には、コンパイルする必要のあるすべてのファイルが含まれています。この例では、すべての TypeScript ロジックを rxjstest.ts ファイルに書き込みます。

TypeScript 内で RxJS を消費する

すでに RxJS ライブラリをインストールしているので、rxjs モジュールから必要なタイプとメソッドをインポートできます。この例では、rxjs ライブラリから Observable タイプと of メソッドをインポートします。

import { of, Observable } from "rxjs";

都市の気温値を公開する新しい Observable タイプのオブジェクトを作成しましょう。

const weatherPublisher : Observable<number> = of(25, 12,45,18);

weatherPublisher は、RxJS``of メソッドを使用して 4つの数値を生成する Observable タイプのオブジェクトです。

次に、weatherPublisher observable をサブスクライブできます。次のように、4つの温度を放出します。

weatherPublisher.subscribe((value: number) => {
  console.log(`Temperature: ${value}`)
})

コードが完成したので、次のコマンドを使用して rxjstest.ts ファイルをコンパイルしましょう。

tsc -p ./tsconfig.json

対応する JavaScript ファイルを生成します。次に、次のように JavaScript ファイルを実行できます。

node rxjstest.js

出力：

Temperature: 25
Temperature: 12
Temperature: 45
Temperature: 18

RxJS ライブラリは TypeScript セットアップで正常に動作します。