使用UMD构建时,如何在类型定义中使用RxJS?

例如:

  1. npm我@ reactivex / rxjs
  2. 使用某些使用RxJs的函数创建index.ts文件
  3. 创建一个引用RxJs UMD构建和以下内容的index.html文件: 由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。

如果这是解决方案,应该由图书馆作者来完成吗?

chaoduncan 回答:使用UMD构建时,如何在类型定义中使用RxJS?

我设法找到一种解决方法,因为rxjs并未为其UMD捆绑包使用类型定义进行构建。

首先,这仅适用于TS> = 3.5,因为您必须打开allowUmdGlobalAccess,否则它将给您以下错误:

TS2686:“ rxjs”是指UMD全局文件,但当前文件是 模块。考虑添加导入。

通过检查文件node_modules/rxjs/bundles/rxjs.umd.js的结尾,您可以找到操作员测试 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

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

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

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

我刚刚遇到和你一样的情况。

首先,您需要使用 npm 在您的计算机上的某个位置安装 rxjs 模块。 在该模块中,将 dist\types 文件夹复制到您的项目中。 (我将其命名为 rxjs

enter image description here

在该文件夹中,在 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';

最后,像这样创建文件 global.d.ts

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

现在您可以使用全局 rxjs!

本文链接:https://www.f2er.com/3153089.html

大家都在问