什么是 @types/rx-jquery
在使用 TypeScript 编写前端项目时，我们可能需要使用到一些 jQuery 插件或者 RxJS 库。@types/rx-jquery 就是 TypeScript 下对于 jQuery 和 RxJS 结合使用的类型定义文件库。
@types/rx-jquery 的安装
使用 npm 安装 @types/rx-jquery：
npm i --save-dev @types/rx-jquery
在项目中使用时，我们可以直接在 TypeScript 文件中导入 jquery 和 rxjs：
import * as $ from 'jquery';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';@types/rx-jquery 的使用
@types/rx-jquery 定义了一些辅助方法，可以方便我们使用 RxJS 和 jQuery 结合的特性。
比如我们要监听鼠标点击事件，可以使用 RxJS 的 fromEvent 方法来处理：
const $document = $(document);
const click$ = Observable.fromEvent(document, 'click'); // 这里使用了 RxJS 的 fromEvent 方法监听 document 的 click 事件
const subscription = click$
.map((evt: JQueryEventObject) => `${evt.pageX}, ${evt.pageY}`)
.filter((text: string) => text.length > 0)
.subscribe((coordinates: string) => console.log(`Clicked at ${coordinates}`));这里使用 jQuery 的 $ 方法选取了 document（实际上也可以使用其他的选择器），然后使用了 RxJS 中的 fromEvent 方法来监听 document 上的 click 事件。在 map 和 filter 这两个 RxJS 的操作符中，我们使用 TypeScript 来指定了传递的参数类型，使得代码更加明确。最后使用 subscribe 方法订阅了处理完成的事件流，输出了点击的坐标。
需要注意的是，当我们使用 jQuery 时，可能会在 TypeScript 中出现无法识别 [jQuery对象] 的问题。这时我们可以在 TypeScript 的 tsconfig.json 文件中配置 types 选项，将 jQuery 加入到全局类型定义中：
{
"compilerOptions": {
"types": ["jquery"],
//...
},
//...
}这样配置后，TypeScript 就能够正确的读取 jQuery 返回的对象类型，并且编译时能通过。
总结
@types/rx-jquery 是一个非常方便的 TypeScript 插件，它可以帮助我们简化使用 RxJS 和 jQuery 结合编写的代码。在项目中使用时，只需要通过 npm 安装，并在 TypeScript 文件中引入需要使用的库即可。同时需要注意，针对无法识别 [jQuery对象] 等问题，配置 tsconfig.json 中的 types 选项可以解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1cdb5cbfe1ea0611f23