将 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 设置配合使用。