使用Recompose mapPropsToStream与RxJS开发TS组件遇pluck报错

看起来你遇到的是RxJS版本升级带来的操作符使用方式变化问题！从RxJS 6开始，所有的操作符（包括pluck）都不再是Observable实例的原型方法了，而是需要通过pipe()方法来链式调用的可管道操作符，这也是你看到类型错误的核心原因。

修复步骤： #

1. 正确导入pluck操作符
   首先确保你从rxjs/operators中导入pluck以及其他需要的操作符：

   import { pluck, debounceTime, filter, distinctUntilChanged } from 'rxjs/operators';
   

2. 用pipe()包装操作符链
   把原来直接链式调用的操作符全部放到pipe()方法里，包括pluck。结合你使用mapPropsStream的场景，修改后的代码示例如下：

   import { mapPropsStream } from 'recompose'; // 假设你基于recompose使用mapPropsStream
   import { pluck, debounceTime, filter, distinctUntilChanged } from 'rxjs/operators';
   
   const Filter = mapPropsStream<Props, Props>((props$) => {
     // 示例：pluck出props中的目标属性，比如输入框的value
     this.onChangeSubscription = props$
       .pipe(
         pluck('value'), // 这里用pipe包裹pluck操作符
         debounceTime(200),
         filter(value => value.length !== 1),
         distinctUntilChanged()
       )
       .subscribe(value => this.props.onChange(value));
   
     // 记得返回处理后的props流给mapPropsStream
     return props$;
   });
   

额外提示： #

• 如果你还在使用RxJS 5或更早版本，pluck确实是Observable的原型方法，但强烈建议升级到v6+——旧版本已停止维护，且v6的可管道操作符更利于Tree Shaking，能有效减小打包体积。
• 在组件中使用RxJS订阅时，一定要记得在组件卸载时取消订阅（比如在componentWillUnmount钩子中调用this.onChangeSubscription.unsubscribe()），避免内存泄漏。

内容的提问来源于stack exchange，提问作者Alekstim