Link opens in new tab

Thanks for your support -- It does make a difference

I have been working on a Node application, and wanted to use Reactive Extensions (RxJS). All previous interactions with it were in web apps that run in the browser after some SystemJS / Webpack massaging.

At first it looked OK. I could build an Observer, and subscribe to it. I tried to use some operators, and this is when I got stumbled.

The Problem

I had a sample Observable , and I wanted to call flatMapTo on it, but I couldn’t!

Autocomplete only showed the subscribe method, as below:

Just importing the specific operator file (which modifies the Observable interface and adds the operator method to it) didn’t seem to get the operator autocomplete (or successful compilation at times) to work.

I didn’t want to have to add each operator manually anyway, and this is Node not browser, I don’t have to be picky about imports (and again, it didn’t work anyway).

Note: I was specifically trying map() , which I was able to get to work with ES2015 targeting (I’m working with Node 5, which has fair ES2015 support). But that’s because an Observable is also an Iterable object that you can loop over, like an array. I was not able to get switchMap() (Rx v5), or even it’s v4 equivalent flatMapLatest() though, or any other operator than map() – before I noticed I was not even calling that as an operator.

The documentation suggested the following line.

<code>typings install rxjs-symbol-typings </code>

But it only threw an error. Which was very weird, because I could find the typings registry entry with this very name.

There were other suggestions for other platforms, which didn’t work for me anyway!

I also struggled to find examples of using RxJS operators with even something like Angular 2. Hence I’m writing this blog post.

How To Get TypeScript Intellisense To Work With RxJS

The main key to working with this was using the “KitchenSink” Definition file. This was also confirmed by looking at:

Property ‘distinct’ does not exist on type Observable<CustomType>

I can use this no problem because I’m in Node and not much worried about the size of the code, etc.

However, this post was not enough to get it to work. I still had a lot to fiddle with. As I mention later, I tried many things, and everything I found working stopped working afterwards.

Until I could nail it down to the following steps:

Install From NPM

You can get that by

<code>npm install @reactivex/rxjs@latest --save </code>

Make sure you got at least version beta.6 , not beta.2 .

Add Definition File

You can do this from your tsconfig.json , like:

<code>{ "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": true }, "compileOnSave": true, "files": [ // Typings autocomplete file "typings/main.d.ts", // RxJS autocomplete "node_modules/rxjs/Rx.KitchenSink.d.ts", // Your other files come here "sample-files.ts" ], "exclude": [ "node_modules", "typings" ] } </code>

Or in each TypeScript file if you choose to, at the top of the file:

<code>///<reference path="./node_modules/rxjs/Rx.KitchenSink.d.ts"/> </code>

Gotchas

For the most part, the previous steps are going to be enough. However, I have found a few more gotchas in different editors, most of them are around WebStorm, which is crazy, as outside Rx, it seems to be an awesome TypeScript IDE.

I like WebStorm because it has the best autocomplete in strings (like paths and imports), and in tsconfig.json (which is outdated in VS Code).

Also, the gotchas sometimes happen in VS Code anyway. I have been going crazy between the two, as soon as I get something to work, undo it and repeat the exact steps, it doesn’t work.

Operator And Type inference

Sometimes type inference doesn’t work. I have found VS Code to be better at this than WebStorm.

<code>var sample1$ = Observable.create(observer => { observer.next("Non-proper autocomplete"); observer.complete(); }); </code>

In this example, autocomplete for sample1$. will give autocomplete for any , which is OK as it’ll accidentally give autocomplete for RXJS operators.

But if you want proper autocomplete:

<code>var sample2$ : Observable<string> = Observable.create(observer => { observer.next("It works"); observer.complete(); }); </code>

Note the : Observable<string> bit.

Observable Helper Methods

These are methods like like of , range , etc. I have found their autcomplete to the worst, it’s very flaky at best.

A few things seemed to help, like importing from "rxjs/onservable" .

<code>import {Observable} from "rxjs/Observable"; </code>

(Vs from "import {Observable} rxjs" )

I have also found that doing import {Observable} works better than import * as Rx .

When everything fails, going to TypeScript compiler in WebStorm and building current file, or even restarting WebStorm (Yes!!) helps fix autcomplete issues, especially if you changed your references and imports a few times. It just gets confused and doesn’t work well until an IDE restart.

Disclaimer

Just in case it’s not obvious for those not familiar with TypeScript. I have been doing JavaScript for so long. I’m not the person who can’t code without a fully-functional autocomplete.

But since autocomplete is an essential advantage of going the TypeScript way, and I have been loving working with RxJS from the demos I saw, I wanted to take it as a challenge more than anything else to see what it would take to get this working.

Share With Friends:

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.

Take it for a test ride, and you may unsubscribe any time.

You might also want to support me by checking these out [Thanks]:

Links open in new tabs

Thanks for your support -- It does make a difference