Угловой и RxJS импорт

Question

Я всегда знал, чтобы импортировать мои операторы Observable отдельно, чтобы ограничить время загрузки. Однако сегодня я заметил кое-что, что, надеюсь, кто-то может мне объяснить.

Я использую IntelliJ/WebStorm с Webpack.

Скажем, на странице в моем ngOnInit у меня есть HTTP-вызов:

ngOnInit() { 
     this.http.get('https//:google.com').map(e => e); 
} 

Если я не импортируют оператора карты компилятор пожалуется, поэтому я импортировать его, как это:

import 'rxjs/add/operator/map'; 

Все хорошо в мире. Пока я не буду использовать Наблюдаемый. Итак, я добавлю.

ngOnInit() { 
     let test = Observable.create(subscriber => { 
      return null; 
     }); 

     this.http.get('https//:google.com').map(e => e); 
} 

Теперь компилятор понятно жалуется, что не может найти Observable, так что я получаю IntelliJ/WebStorm импортировать его для меня, и добавляет это в верхней части моего файла:

import {Observable} from 'rxjs'; 

Все снова хорошо , Но этот новый импорт, по-видимому, делает импорт карты неактуальным. То, что я имею в виду, что, если я удалю импорт карты и просто оставить Observable один в, все отлично компилируется ...

Однако, если я указываю импортировать Наблюдаемые как это:

import {Observable} from 'rxjs/Observable'; 

Тогда я должен повторно добавить импорт для оператора карты ...

Я импортирую все RxJS, когда я импортирую мои наблюдения таким образом?

import {Observable} from 'rxjs'; 

Если да, то как я могу сказать IntelliJ, чтобы этого не делать и импортировать класс?

Answer 1

Почему бы не иметь файл (например: rxjs-extensions.ts) с вашими требуемыми расширениями и операторами расширения rxjs-класса?

// Observable class extensions 
import 'rxjs/add/observable/throw'; 

// Observable operators 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/map'; 

А затем в основном модуле (бывший app.module.ts) импорт из этого файла:

import './rxjs-extensions'; 

И в главном компоненте (например: app.component.ts) просто импортировать Observavle :

import { Observable } from 'rxjs/Rx'; 

Вот как он покрыт основным угловым учебником.

Answer 2

Вы можете использовать все операторы с помощью этого:

import * as Rx from "rxjs/Rx"; 

Rx.Observable.of(1,2,3,4,5); 

Answer 3

Начиная с WebStorm 2016.3 (я верю), у вас есть возможность черного списка определенного импорта.Editor > Code Style > StypeScript

Do not import exactly from: [rxjs] 

Кроме того, есть флаг доступен в tslint запретить глобальный импорт:

{ 
    "rules": { 
    "import-blacklist": [true, "rxjs"] 
    } 
}