我應該同時使用'import'rxjs/Rx'`和`import {Observable} from'@ rxjs/Observable'`

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已導入分別進口。如果一個特定的模塊被全部導入，爲什麼它的一個特定對象被單獨導入？我試着在論壇上從這個地方提出這個問題，但是沒有答案，我想知道這是否有幫助s優化代碼。

Answer 1

一般：

在打字稿，途中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語法。

至於rxjs老話 - 當你想進口特定運營商像this question does這是一個有點靠不住的 - 所以要得到具體的運營方式是：import 'rxjs/add/observable/from' - 但也需要與你的的WebPack一個修修補補按照the referenced question's answer中所述進行設置。

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); 

這模擬，如果您加載使用捆綁的庫，你會有什麼 - 一個全球性的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。