將 RxJS 與 TypeScript 一起使用

1. TypeScript 非同步執行
2. 使用 RxJS 進行反應式程式設計
3. 使用 TypeScript 設定 RxJS
4. 在 TypeScript 中使用 RxJS

TypeScript 是 JavaScript 語言的超集，它支援靜態型別和型別檢查，同時保留了 JavaScript 提供的所有其他功能。先進且廣泛使用的功能之一是非同步程式執行。

現代應用程式具有高度互動性和麵向消費者的特點。因此，大部分資訊都是非同步可用的。

TypeScript 中提供了多種技術來處理非同步邏輯，例如回撥、承諾和事件。

TypeScript 非同步執行

回撥函式是用於處理非同步程式碼的最古老的技術。回撥有一些缺點，例如沒有正確的方法來捕獲錯誤、引入回撥地獄和維護問題。

因此，引入了承諾的概念。承諾模仿現實世界的承諾，其中非同步操作生成可能是成功或失敗的最終結果。

在 TypeScript 中，promise 物件接受一個函式，該函式帶有兩個名為 resolve 和 reject 的引數，以保持或失敗。這是非同步程式設計的一大步，但回撥地獄問題仍然存在。

釋出者-訂閱者技術是處理非同步事件的另一種流行方式。每當物件的狀態發生變化時，它都會向其訂閱者或觀察者發出通知。

它是一種比回撥更高階的處理非同步操作的方法，但它仍然有一些缺點，例如不能訂閱一系列事件來順序處理它們，事件可能會永遠丟失等。

使用 RxJS 進行反應式程式設計

如前所述，事件處理就像在迷宮中尋找出路。因此，事件驅動的應用程式實現很麻煩。

因此，引入了反應式程式設計方法。它簡化了非同步程式碼的執行和 TypeScript 中事件驅動程式的實現。

它依賴於 Observable 的概念。此外，還使用了觀察者和迭代器模式。

使用 TypeScript 設定 RxJS

首先，我們需要建立一個 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 陣列包含我們需要編譯的所有檔案。在此示例中，我們將在 rxjstest.ts 檔案中編寫所有 TypeScript 邏輯。

在 TypeScript 中使用 RxJS

由於我們已經安裝了 RxJS 庫，我們可以從 rxjs 模組匯入必要的型別和方法。在這個例子中，我們將從 rxjs 庫中匯入 Observable 型別和 of 方法。

import { of, Observable } from "rxjs";

讓我們建立一個釋出城市溫度值的新 Observable 型別物件。

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

weatherPublisher 是一個 Observable 型別的物件，它使用 RxJS of 方法生成四個數值。

接下來，我們可以訂閱 weatherPublisher 可觀察物件。它發出四個溫度，如下所示。

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 設定配合使用。