CODEWITHSUNDEEP
typescriptrxjsobservable
user3547774
user3547774

Reputation: 1699

Typescript import different functions

I am using the Observable class and have the following

import { Observable } from 'rxjs/Observable';

Now I want to use the .of function of Observable, therefore I have to add the following into my imports

import 'rxjs/add/observable/of';

My question is, why do I have to import these functions separately. Shouldn't this be part of the Observable class? Plus when I navigate into the rxjs module folder I see a number of different files such as of.d.ts, merge.d.ts. Why are these in separate files, is it to minimize the files loaded? Plus how do I load the complete library if I want to?

Upvotes: 1

Views: 828

Answers (1)

Matt Burnell
Matt Burnell

Reputation: 2796

Yes, it's to allow you to keep your library footprint as small as possible. If you want to drag everything in, you can reference the Rx.d.ts file. However, I've found that targeting only what I'm using is saving me over 100K uglified js in rxjs alone, so I've created my own "barrel" for the task. Here's a sample: 

export { Observable } from 'rxjs/Observable';
export { Subscription } from 'rxjs/Subscription';
export { Subject } from 'rxjs/Subject';
export { BehaviorSubject } from 'rxjs/BehaviorSubject';
export { AsyncSubject } from 'rxjs/AsyncSubject';

import 'rxjs/add/observable/never';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/timer';
import 'rxjs/add/observable/using';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/zip';

import 'rxjs/add/operator/concat';
import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/zip';

Note that the files in observable are the static methods you want to be able to call on Observable, and those in operator are those available on Observable instances.

Upvotes: 4

Related Questions