Rxjs 运算符的 Typescript 导入语句答案

【问题标题】：Typescript import statements for Rxjs operatorsRxjs 运算符的 Typescript 导入语句
【发布时间】：2023-04-10 14:56:01
【问题描述】：

我有一个 Angular 项目，其中包含 RxJs 库操作符之类的东西， map,do 等不被导入。源中似乎没有通配符导入。

我的 Ionic 和 Angular 项目都可以：

import { Observable } from 'rxjs';

然后我有一个 Ionic 项目，如果我没有明确说明导入，它会抱怨。

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

此外，在 Ionic 项目中，我似乎也无法在 RxJS 的 node_modules 文件夹中找到 refCount。虽然现在，我开始认为我需要一个像 rx.lite.js 这样的特定包......我不知道 rx.lite.js 和 rx.lite-aggregates.js 是如何添加到 Angular 项目中的在 node_modules 文件夹中。我在我的 Ionic 项目中没有做到这一点。 Angular 项目的 package.json 中没有明确引用它们。也许是某种传递依赖？

Angular 项目是我从 Git 存储库中获得的，所以我想知道是否有某种配置文件可以在项目的其他地方执行此操作。我想知道是否有人可以帮助我解开这个谜团。

Angular 项目 package.json rxjs 依赖
```
"rxjs": "^5.1.0",
```

Angular 项目 tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

Ionic 项目 package.json rxjs 依赖
```
"rxjs": "5.1.1",
```

离子项目 tsconfig.json

{
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [
       "dom",
       "es2015"
     ],
     "module": "es2015",
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es5"
   },
   "include": [
     "src/**/*.ts"
   ],
  "exclude": [
    "node_modules"
   ],
 "compileOnSave": false,
 "atom": {
   "rewriteTsconfig": false
 }

}

我一直在尝试理解 tsconfig.json。看到这个link

【问题讨论】：

看看这个stackoverflow.com/questions/43651560/…或者这个stackoverflow.com/questions/39775577/rxjs-bundle-from-unpkg/…
我阅读了这些帖子，但它们并没有真正为我澄清事情。
我现在怀疑 tslint.json 实际上负责黑名单。我在以 ng new 开始的项目中看到了以下形式的语法：“rules:” {“import-blacklist”: [true, “rxjs”]}。

标签： typescript import rxjs

【解决方案1】：

这很可能取决于源代码的结构。

一般来说，您永远不应该从'rxjs' 导入，而是始终导入特定的模块。例如：

import { Observable } from 'rxjs/Observable';

当您执行import { Observable } from 'rxjs' 时，您正在导入已添加所有运算符的Rx.ts 文件，这意味着您无需调用任何import 'rxjs/add/operator/...';，因为运算符已被导入。

例如，如果您有一个 Angular 项目，并且在根模块中添加了 import { Observable } from 'rxjs'，那么即使您根本没有在根模块中使用任何 Observable，您也永远不需要单独导入任何运算符。

我认为你的情况完全一样。这仅取决于您从 'rxjs' 导入的位置以及是否在您尝试使用任何运算符之前发生。

因此，angular-cli 默认会从'rxjs' 导入黑名单。

【讨论】：

你不应该将 rxjs 作为一个整体导入的原因是它会将所有的 Rx 添加到你的包中。相反，如果你只导入你需要的操作符，你会得到一个更小的包。这可以增加首次渲染和所有这些事情的时间。在开发过程中，使用通配符可能很方便，但是这会导致您可能忘记的技术债务。
@martin。这与我上面的经历并不相符。我在 Observable 上没有 rxjs 前缀的两个项目中进行了导入。每个项目都表现出不同的行为。所以我认为这里还有更多的东西在起作用。我还发现我什至找不到带有显式添加导入的 refCount 。 github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/…
@JGFMK refCount 不是一个运营商。这是ConnectObservable上的一个方法，所以它没有add/...。
谢谢，现在 refCount 有意义了。但是，如果我在 Ionic 项目中从 rxjs 导入 Observable，为什么我仍然必须显式导入 Ionic 项目中的所有运算符（我很欣赏显式导入的好处 - 但对不同的行为感到困惑）。
@JGFMK 我不是在写你的项目，我还没有看到它的源代码，所以我不能告诉你为什么它的工作方式是这样的。但我建议你看看我在这里提到的那些东西，同时也要注意 RxJS 4 和 RxJS 5 是两个不同的东西。例如，rx.lite.js 来自 RxJS 4，但根据您的描述，您希望使用 RxJS 5。

【解决方案2】：

rxJs 有很多不同的导入技术。我很困惑，直到我读到这个： Understanding Operator Imports

请注意，如果您使用这种导入技术（您可能应该）：

import {myOperator} from 'rxjs/operators/myOperator';

...要真正使用myOperator，你需要调用它的call方法，或者将它传递给pipe操作符：

myOperator.call(parameters);

pipe 运算符似乎超出了本主题的范围。只要知道它提供了一种绕过.call 语法的方法，重要的是，它允许您有效地链接以这种方式导入的多个运算符。查看链接了解更多详情（真的，它非常有用）。

最后，Ionic 中的 rxjs 运算符会出现类型错误，尤其是在您使用 angularfire2（版本 5）时。有时您可以通过将 Angularfire 提供的对象转换为 Observable<..some type..>

来解决这些错误

【讨论】：