使用filterOperator看下面代码：import{fromEvent,interval,MonoTypeOperatorFunction}from'rxjs';import{filter}from'rxjs/operators';functionfilterKey(key){console.log('输入:',键);const结果：MonoTypeOperatorFunction=filter((event:KeyboardEvent)=>{console.log('inputevent:',event);returnevent.key===key;});console.log('结果:',结果);返回结果;}fromEvent(document,'keyup').pipe(filterKey('Enter')).subscribe((data)=>console.log(data)//KeyboardEvent);原始Observable调用pipe，执行自定义Operator的逻辑，在逻辑中生成一个filterOperator实例。单步调试如下：returnafilterOperatorFunction：filter调用返回一个filterOperatorFunction：到目前为止我们只完成了pipe的第一部分两部分调用：获取filter返回的filterOperatorFunction。然后执行管道操作的第二部分，如上图所示，将原来的Observable传入filterOperatorFunction：这第二个操作会创建一个新的FilterOperator实例，在提升操作中，创建一个新的Observable，然后设置originalObservable作为新Observable实例的源字段，并将FilterOperator实例赋值给原Observable的Operator字段。管道调用的结果，返回一个新的Observable给管道的调用者。最后，我们订阅的是管道返回的Observable.subscribe，这是管道返回的新Observable，operator指向filterOperator，source指向fromEvent返回的原始Observable：首先，使用TypeScript对象结构语法，对象析构，将this.operator字段赋值给变量Operator，然后使用原来的O??bservable作为context调用filterOperator。这样，管道返回的Observable上的订阅就会传递给原来Observable的订阅操作：当我们点击键盘上的一个字符时，MouseEvent对应的handler，在handler中调用Observer的下一步操作。接下来的操作最终会触发filtersubscriberpredicate属性，它是应用开发者传入给filterOperator的匿名函数：filter的输入参数也是一个函数，这个函数的输入是MouseEvent:fromEvent的newObservable，实现了里面的逻辑，也调用了订阅者的next方法发出值。同时，fromEvent返回的Observable与of等其他创建操作符不同的是，它可以响应各种事件，比如document的keyup事件。这种事件注册机制是在上图中的setupSubscription函数中实现的。注册的具体实现采用浏览器提供的addEventListener，调用者为document全局对象，传入的eventName为keyup，handler为fromEvent的内部实现，即上图绿色高亮区域的代码数字。exportdeclarefunctionfilter(predicate:(value:T,index:number)=>boolean,thisArg?:any):MonoTypeOperatorFunction;filterOperator接受谓词作为输入参数并返回MonoTypeOperatorFunction类型的函数。这里T是类型参数。MonoType对应T，表示单参数。MonoTypeOperatorFunction是一个特殊的OperatorFunction。当后者的输入和返回参数相同时，特化为单一类型的OperatorFunction：OperatorFunction也是一种特殊的UnaryFunction（一元函数）。当一元函数的输入输出类型都是Observable时，特化为OperatorFunction。
