Question

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';
@Component({});
export shellModule{}

这是我从某个地方复制的Angular应用程序的一段代码（我已经删除了导出模块中的定义。我正在使用它来创建一个调用API的服务。

在此特定文件的导入中，为什么即使导入了整个 rxjs ，也会单独导入Observable。如果整个导入特定模块，为什么单独导入特定对象？我尝试在论坛上提出这个问题，但我没有回答。我想了解这是否有助于优化代码。

Answer 1

一般：

在Typescript中，modules are handled要求您使用import * as rx from 'rxjs/Rx'加载整个库，或者使用库中的特定导出模块来使用它，因此编译器会加载到类型。

将您的导入仅限定为您需要的特定模块会将您的应用设置为使用Angular's AOT compilation中的树摇动。这不是由打字稿编译器完成的，而是由tool called rollup完成的。因此，可以帮助稍后优化代码，但它不会自动执行此操作。

就编译开销而言，引入整个库可能会减慢编译器的速度......但除了大量复杂的库之外，这不是一个非常强大的要点。

我个人而言，更喜欢在特定模块中导入，因为它使调用代码更加清晰，因为我不需要使用该全局名称来获取特定名称。 rx.Observable vs Observable。一个很好的例子是lodash库（rxjs有点复杂......）

老实说，导入整个库就像你在那里的行：import 'rxjs/Rx'对我没有意义。您应该只导入特定的导出模块。尝试删除它，查看您获得的错误，然后使用* as rx语法。

就rxj而言 - 当你想要导入特定的运算符（例如this question does时，它有点不稳定 - 所以获取特定运算符的方法是：import 'rxjs/add/observable/from' - 但这也需要修改the referenced question's answer中概述的 webpack 设置。

Answer 2

让我们看看rxjs/Rx模块导出的内容：

export { Subject, AnonymousSubject } from './Subject';
export { Observable } from './Observable';
export { Operator } from './Operator';
export { Observer } from './Observer';
export { Subscription } from './Subscription';
export { Subscriber } from './Subscriber';
export { AsyncSubject } from './AsyncSubject';
export { ReplaySubject } from './ReplaySubject';
export { BehaviorSubject } from './BehaviorSubject';
...

import './add/observable/bindCallback';
import './add/observable/bindNodeCallback';
import './add/observable/combineLatest';
...

因此它导出RxJs类，并从add文件夹导入运算符。因此，您可以看到它加载库中的所有内容。它不会导出任何全局对象。所以你需要像这样使用命名导出：

import * as Rx from 'rxjs/Rx'

能够使用导出的类：

Rx.Observable.of(12, 3);

这模仿了使用bundle加载库时的内容 - 全局Rx对象：

<script src="rxjs/bundles/Rx.js">

如果您想使用Observable而不使用Rx全局对象，则需要单独导入它：

import { Observable } from '@rxjs/Observable';
Observable.of(1);

导入两者

import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';

不是一个好习惯，但如果你不想单独导入每个操作员，可以使用它。

另见How to correctly import operators from the rxjs package。

我应该同时使用`import＆＃39; rxjs / Rx＆＃39;`和'import {Observable}来自＆＃39; @ rxjs / Observable＆＃39;`

2 个答案: