使用 UMD 构建时如何将 RxJS 与类型定义结合使用？

Question

例如 ：

1. npm 我@reactivex/rxjs
2. 创建一个index.ts文件，其中包含一些使用RxJs的函数
3. 创建一个index.html 文件，该文件引用RxJs UMD 构建以及由typescript 编译器从index.ts 创建的index.js 文件。

这里有一个重现： https: //github.com/valeriob/Repro_rxjs_typescript 只需运行“tsc”并查看编译错误。

在这种情况下编辑index.ts时如何获取类型定义？

遵循这些指南https://github.com/zspitz/TypeScript-Handbook/blob/release-2.0/pages/Modules.md#umd-modules 我能够通过附加“导出为命名空间 rxjs;”来使其工作；到文件 node_modules/rxjs/index.d.ts 。

如果这应该是解决方案，那么它应该由库作者完成吗？

Answer 1

我设法找到了解决方法，因为 rxjs 不使用其 UMD 包的类型定义进行构建。

首先，这只适用于 TS >= 3.5，因为你必须打开allowedUmdGlobalAccess，否则它会给你这个错误：

TS2686：“rxjs”指的是 UMD 全局，但当前文件是一个模块。考虑添加导入。

通过检查文件末尾node_modules/rxjs/dist/bundles/rxjs.umd.js，您可以发现operators、testing、ajax、webSocket和fetch就像子命名空间，其他所有内容都直接位于全局下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;
...

因此，您所要做的就是创建一个 .d.ts 文件，如下所示：

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

rxjs现在您可以在任何 ts 文件中使用全局：

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

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