How do use RxJS with type definitions when using the UMD build?

Question

For instance :

1. npm i @reactivex/rxjs
2. Create a index.ts file with some function that use RxJs
3. Create an index.html file that reference RxJs UMD build and the index.js file created by the typescript compiler from the index.ts one.

here there is a repro : https://github.com/valeriob/Repro_rxjs_typescript Just run "tsc" and see the compiling error.

How do i get type definitions while editing index.ts in this scenario ?

Following those guidelines https://github.com/zspitz/TypeScript-Handbook/blob/release-2.0/pages/Modules.md#umd-modules i was able to make it work by appending "export as namespace rxjs;" to the file node_modules/rxjs/index.d.ts .

If this should be the solution, should it be done by the library authors ?

Answer 1

I managed to find a workaround, since rxjs does not build with type definitions for its UMD bundle.

First of all, this only works for TS >= 3.5, because you have to switch on allowUmdGlobalAccess, or else it will give you this error:

TS2686: 'rxjs' refers to a UMD global, but the current file is a module. Consider adding an import instead.

By inspecting the end of the file node_modules/rxjs/dist/bundles/rxjs.umd.js, you can find that operators, testing, ajax, webSocket and fetch are like subnamespaces, and everything else is directly under the global rxjs:

...

var operators = _operators;
var testing = _testing;
var ajax$1 = _ajax;
var webSocket$1 = _webSocket;
var fetch$1 = _fetch;

exports.operators = operators;
exports.testing = testing;
exports.ajax = ajax$1;
exports.webSocket = webSocket$1;
exports.fetch = fetch$1;
exports.Observable = Observable;
exports.ConnectableObservable = ConnectableObservable;
exports.GroupedObservable = GroupedObservable;
exports.observable = observable;
...

So all you have to do is create a .d.ts file like this:

export * from 'rxjs'
export * as operators from 'rxjs/operators'
export * as testing from 'rxjs/testing'
export * as ajax from 'rxjs/ajax'
export * as webSocket from 'rxjs/webSocket'
export * as fetch from 'rxjs/fetch'

export as namespace rxjs

And now you can use the global rxjs in any of you ts files:

const { interval } = rxjs
const { filter } = rxjs.operators

interval(500).pipe(
    filter(t => t % 2 === 0)
).subscribe(t => console.log(t))

Answer 2

I just have faced the same scenario as you.

First of all, you need to use npm to install rxjs module somewhere on your computer. in that module, copy the dist\types folder into your project. (I named it rxjs)

.

In that folder, add following lines at the end of the index.d.ts:

export * as operators from './operators';
export * as ajax from './ajax';
export * as fetch from './fetch';
export * as webSocket from './webSocket';
export * as testing from './testing';

Finally, Create the file global.d.ts like this:

import * as _rxjs from './rxjs';
declare global {
   const rxjs: typeof _rxjs;
}

And now you can use the global rxjs!