RxJS 第一个示例

让我们从 RxJS 教程开始，从 RxJS 的第一个例子开始。在这里，我们将看到如何设置开发环境，并开始了解可观察对象和创建 RxJS 的第一个例子。

设置和安装依赖项

要开始我们的项目，首先，我们必须使用以下命令创建一个新的项目文件夹

现在，通过执行以下命令进入新创建的文件夹

现在，我们将使用以下 npm（Node.js 包管理器）命令在我们的项目文件夹中创建一个新的 package.json 文件

在上图中，您可以看到 package.json 文件已经创建。您也可以在该图像中看到默认代码。

注意：如果您尚未安装 Node.js，则可以使用 npm 轻松安装它。首先，要安装 Node.js，请转到 Node.js 官方网站的下载页面 https://node.org.cn/en/download/，然后根据您的操作系统安装软件包。

安装 Webpack、TypeScript 和 Webpack 的 TypeScript 加载器

在这里，我们必须使用 NPM 再次通过以下命令添加并安装一些依赖项，例如 Webpack、TypeScript、Webpack 的相应 TypeScript 加载器以及 Webpack 开发 Web 服务器

什么是 Webpack？

Webpack 是现代 JavaScript 应用程序的模块捆绑程序。它用于处理我们的应用程序。当 Webpack 处理我们的应用程序时，它会在内部构建一个依赖关系图，该图映射了我们的项目所需的每个模块，并生成一个或多个捆绑包。

什么是 TypeScript？

TypeScript 是一种开源编程语言，由 Microsoft 开发和维护。它用于向 JavaScript 添加可选的静态类型。它是 JavaScript 语言的严格语法超集。

安装 Webpack CLI

我们必须确保我们已将 Webpack CLI（命令行界面）安装为开发依赖项。使用以下命令安装 Webpack CLI

将脚本添加到 Package.JSON 文件

将以下名称为 start 的脚本添加到 package.json 文件的 scripts 部分

当项目完成后，此脚本用于在开发模式下执行 webpack-dev-server 命令，当我们启动 Webpack 开发 Web 服务器时。

设置 Webpack

现在，我们必须将 Webpack 配置添加到我们的项目中。因此，在根项目文件夹中创建一个名为 webpack.config.js 的新文件，并使用以下配置代码

配置 TypeScript

我们还必须在项目中添加 TypeScript 编译器配置。为此，创建一个名为 tsconfig.json 的新文件，并使用以下 JSON 代码，其中包含 TypeScript 编译器的配置属性

创建主页 Index.html 文件

现在，在项目文件夹内为浏览器创建名为 index.html 的主页文件

Index.html 文件

添加 TypeScript 代码

现在，项目设置已准备就绪，TypeScript 和 Webpack 配置已设置，并且 HTML 文档已创建。接下来，在项目文件夹内创建一个名为 src 的新子文件夹，然后在其中创建一个名为 index.ts 的新文件。在 index.ts 文件中插入以下代码

运行项目

现在，项目已准备好启动。运行以下命令以打开开发 Web 服务器

现在，您可以通过 URL https://:8080 访问 Web 应用程序。打开您的 Web 浏览器以查看以下结果

输出