免费 AI IDE
The emitter Observable and the modulus Observable could be explicitly typed as follows: Reactive Extensions for JavaScript 库是专门用于事件处理的最强大和流行的 JavaScript 库之一 ，或简称为 RxJS 。 RxJS 使用名为 Observable 模式的四人组 ( GoF ) 设计模式作为注册事件兴趣的基础，以及在事件触发时执行某些操作。 下面，我们就一起来探索 RxJS 库的基础知识以及它提供的 Observables 的基本概念。
安装 RxJS 库
要开始讨论 Observables， 我们首先安装 RxJS 库，如下所示：
npm install rxjs RxJS 库已经包括由 Typescript 所需的申报文件，所以没有必要单独使用@types安装它们。
要生成一个 Observable，我们可以使用 of， 如下函数：
import { of, Observable } from "rxjs";
const emitter : Observable<number> = of(1, 2, 3, 4); 在这里，我们首先从rxjs库中导入 of 函数和 Observable类型 。然后我们定义一个名为emitter的常量变量 ，它使用通用语法将其类型定义为类型number的 Observable 。然后我们将of函数的结果分配给 发射器变量，这将创建一个从数字 1 到 4 的 Observable。我们现在可以创建一个 Observer，如下所示：
emitter.subscribe((value: number) => {
console.log(`value: ${value}`)
}); 在这里，我们调用变量emitter上的subscribe函数。由于 emitter 变量是 Observable 类型，它会自动公开 subscribe 函数以注册Observers。subscribe 函数将一个函数作为参数，该函数将为 Observable 发出的每个值调用一次。这段代码的输出如下：
value: 1
value: 2
value: 3
value: 4 在这里，我们可以看到我们传递给 subscribe 函数的函数确实为 Observable 发出的每个值调用了一次。
请注意，只有在Observable上调用subscribe函数时，Observable才会开始发出值。调用该 subscribe函数称为订阅 Observable，而 Observable产生的值也称为 Observable流。
of 函数有一个名为 from的伙伴函数，它使用一个数组作为 Observable 的输入，如下所示：
const emitArray : Observable<number> = from([1, 2, 3, 4]);
emitArray.subscribe((value: number) => {
console.log(`arr: ${value}`);
}); 在这里，我们有一个名为emitArray的变量 ，它的类型是 Observable<number>，并且正在使用该 from 函数从数组中创建一个 Observable。同样，我们对名为emitArray 的 Observable 上调用subscribe函数 ，并为 Observable 发出的每个值提供一个要调用的函数。这段代码的输出如下：
arr: 1
arr: 2
arr: 3
arr: 4 在这里，我们可以看到 from 函数已经从数组输入创建了一个 Observable 流，并且我们提供给 subscribe 函数的函数正在为Observable 发出的每个值都调用一次。
Pipe 和 Map
RxJS 库为所有的 Observable 提供了一个 pipe 函数， 类似 subscribe 函数。该 pipe函数将可变数量的函数作为参数，并将对 Observable 发出的每个值执行这些函数。提供给 pipe 函数的函数通常称为 Observable 操作符，它们都接受一个 Observable 作为输入，并返回一个 Observable 作为输出。 pipe 函数发出一个 Observable 流。
这个概念最好通过阅读一些代码来解释，如下例所示：
import { map } from "rxjs/operators";
const emitter = of(1, 2, 3, 4);
const modulus = emitter.pipe(
map((value: number) => {
console.log(`received : ${value}`);
return value % 2;
}));
modulus.subscribe((value: number) => {
console.log(`modulus : ${value}`);
}); 在这里，我们从一个名为emitter的 Observable 开始 ，它将发射值 1 到 4。然后我们定义一个名为modulus 的变量来保存对emitter Observable调用pipe 函数的结果 。我们为pipe 函数提供的的唯一参数是对map 函数的调用 ，它是 RxJS的运算符函数之一。
map 函数将单个函数作为参数，并将为 Observable 发出的每个值调用此函数。该 map 函数用于将一个值映射到另一个值，或以某种方式修改发出的值。在此示例中，我们返回将 2 的模数应用于每个值的结果。
最后，我们订阅 Observable 并将其值记录到控制台。这段代码的输出如下：
received : 1
modulus : 1
received : 2
modulus : 0
received : 3
modulus : 1
received : 4
modulus : 0 在这里，我们可以看到 emitter Observable 发出 1 到 4 的值，并且 modules Observable正在为接收到的每个值发出的Modules 2。
请注意，在这些代码示例中，我们没有明确设置 Observable 的类型。 emitter Observable和modules Observable可以显式类型如下：
const emitter : Observable<number> = of(1, 2, 3, 4);
const modulus : Observable<number> = emitter.pipe(
...
); 在这里，我们指定了 emitter Observable 和modules Observable 的类型。这不是绝对必要的，因为 TypeScript 编译器会在使用 Observables 时确定正确的返回类型。然而，它确实明确说明了我们对 Observable 流的期望，并且在更大或更复杂的 Observable 转换中，明确设置预期的返回类型使代码更具可读性并可以防止错误。
组合运算符
pipe 函数允许我们组合多个运算符函数，每个函数都将应用于 Observable 发出的值。考虑以下代码：
const emitter = of(1, 2, 3, 4);
const stringMap = emitter.pipe(
map((value: number) => { return value * 2 }),
map((value: number) => { return `str_${value}` })
);
stringMap.subscribe((value: string) => {
console.log(`stringMap emitted : ${value}`);
}); 在这里，我们有一个Observable的命名 emitter ，它将发射值 1 到 4。然后我们有一个名为stringMap的变量 ，用于保存 emitter Observable的pipe 函数的结果 。在这个 pipe 函数中，我们有两个 map 函数。第一个 map 函数将传入的数值乘以 2，第二个 map 函数将其转换为带有前缀的字符串 str_。
然后我们订阅 Observable 并将每个值记录到控制台。这段代码的输出如下：
stringMap emitted : str_2
stringMap emitted : str_4
stringMap emitted : str_6
stringMap emitted : str_8 在这里，我们可以看到两个 map 函数都应用于emitter Observable发出的每个值 。请注意 ，在我们的第二个 map 函数中，我们实际上已经将每个值的类型从 number 类型修改为 string 类型。 这就是为什么在我们的函数中为value 参数指定 subscribe的类型是 string 类型的原因。
概括
在本篇文章中，我们已经探讨了基本的RxJS 库，它提供了可观测量的基本概念。我们已经看到了如何使用 of 和 from 函数轻松创建 Observable 。
