Using RxJS with TypeScript

Question

I have a problem trying to use RxJS with TypeScript and Node.js. I am using NPM, and I have included rxjs-es version 5. I am also using Typings, and I have included both es6-shim and rx.all, like so:

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "rx.all": "registry:dt/rx.all#2.2.28+20160316155526"
  }
}

Below is my tsconfig.json file.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ]
}

In a TypeScript file, I am trying to do the following:

import { Observable } from 'rxjs/Observable';

When I try to compile the script, I get the following error:

typings/main/ambient/rx.all/index.d.ts(10,11): error TS2304: Cannot find name 'Rx'.

This happens even if I try to use RxJS within my script or not, so the problem is related to the TypeScript typings.

What do I need to install using typings and NPM in order to use RxJS? In particular, I am interested in using Observables. After Googling for hours, I cannot seem to figure out just what I need to make it work. I have tried the following, but without any luck. I have also tried many combinations of rx packages in NPM and typings, but haven't found anything that works. Any help is much appreciated!

Do you have an example of TypeScript + RxJs without Angular? I have a the same error: node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise' and I haven´t been able to fix it.... With just this import and no more core: import { Observable } from 'rxjs/Observable'; — Gabrielizalo
– Gabrielizalo, Commented Sep 21, 2016 at 20:34
How do you compile your TS source? import { Observable } from 'rxjs/Rx' should just work. — Rafal Pastuszak
– Rafal Pastuszak, Commented Jan 8, 2018 at 18:11

OJ Kwon · Accepted Answer · 2016-04-30 07:35:45Z

18

RxJS 5 is written in typescript and its type definitions are included by default for published module, you may not need typings for rx.all. Actually those type definitions are written for previous versions of RxJS. Simply uninstall rx.all type definition and try to import without those.

answered Apr 30, 2016 at 7:35

OJ Kwon

4,6911 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aniruddha Das Over a year ago

but by default the types definations are not available. do you have any sample project without angularjs or other library

Latin Warrior · Accepted Answer · 2017-07-01 12:39:09Z

14

The correct way of accomplishing this for Angular (not AngularJS) is by using @types from npm. The command is as follows:

npm install @types/rx --save-dev

For more information, see npm.

answered Jul 1, 2017 at 12:39

Latin Warrior

93212 silver badges14 bronze badges

Comments

Rafal Pastuszak · Accepted Answer · 2018-01-08 18:07:46Z

Generally, you don't need to install typings separately, just including rxjs/Rx in your project should work (note the package name):

// installed with `$ npm i rxjs`
import { Observable } from 'rxjs/Rx' // <- rxjs from NPM

Observable
    .of('Hello')
    .map( w => w + ' world!') // Annotated properly: (w: string) => string
    .subscribe(console.log.bind(console)) // 'Hello world!'

My `.tsconfig` (node)

Shouldn't be relevant, but feel free to use/compare.

{
    "compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "removeComments": false,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "preserveConstEnums": true
    },
    "exclude": [
        "logs",
        "node_modules"
    ]
}

Corey Alix · Accepted Answer · 2016-04-29 16:47:52Z

1

That typings file depends on Rx:

declare module "rx.all" {
    export = Rx;
}

Try installing "rx" as well as "rx.all":

typings install rx --save --ambient

But notice these typings assume you are importing "rx.all" or "rx" so your import will not give you typing info:

import { Observable } from 'rxjs/Observable';

Can you import from "rx" instead of "rxjs"?

import { Observable } from 'rx';

edited Apr 29, 2016 at 16:47

answered Apr 29, 2016 at 16:39

Corey Alix

2,7602 gold badges28 silver badges43 bronze badges

Comments

Racil Hilan · Accepted Answer · 2016-10-13 13:34:28Z

1

You can install typings for RXJS by entering the following in your CLI.

typings install --global dt~es6-shim --save

This will add the following to your typings.json "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"

Then add a reference path to the top of your typescript file

/// <reference path="typings/globals/es6-shim/index.d.ts" />`

or to your tsconfig.json.

This will remove any typescript errors.

edited Oct 13, 2016 at 13:34

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

answered Oct 13, 2016 at 13:03

Howard Panton

2674 silver badges6 bronze badges

Comments

Rick · Accepted Answer · 2016-11-07 17:53:49Z

-3

If you are using TypeScript 2 you can try this.

typings install npm:rx/ts/rx.all.d.ts --save --global

answered Nov 7, 2016 at 17:53

Rick

13.6k3 gold badges46 silver badges42 bronze badges

1 Comment

Alexander Mills Over a year ago

isn't it @types now instead of typings...? confusing :)

Collectives™ on Stack Overflow

Using RxJS with TypeScript

6 Answers 6

1 Comment

Comments

My `.tsconfig` (node)

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

My .tsconfig (node)

Comments

Comments

Comments

1 Comment

Related

My `.tsconfig` (node)