Managing RxJS Imports with TSLint

There are a number of options for importing RxJS and these are detailed in the documentation.

You can import everything:

import Rx from "rxjs/Rx";
Rx.Observable.of(1, 2, 3).map(i => i.toString());

You can import only the methods you need, patching the Observable prototype:

import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";
import "rxjs/add/operator/map";
Observable.of(1, 2, 3).map(i => i.toString());

Or you can import the methods to be called directly — not via the Observable prototype:

import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
import { map } from "rxjs/operator/map";
const source = of(1, 2, 3);
const mapped = map.call(source, i => i.toString());

Each of these options has its advantages and disadvantages:

• importing everything is simple and ensures all methods are available, but comes at the cost of importing the entire 586 KB (unminified) bundle;
• patching Observable with only the methods you wish to use results in a smaller build, but care must be taken to ensure that methods are imported before they are used and that all necessary…