如何导出预置pipe操作符的RxJS Subject并支持调用next方法？

问题原因 #

Subject实例调用.pipe()后返回的是普通Observable类型，不再携带Subject原生的next()/error()/complete()推送方法，因此无法直接在pipe返回结果上调用next()推送值。

另外示例代码存在语法错误：tap内的箭头函数缺少闭合括号，正确写法为tap(() => console.log('updated'))。

实现方案 #

根据是否需要在模块外部调用推送方法，可选择对应实现：

方案1：推送逻辑收敛在模块内部（推荐实践） #

这是RxJS开发的通用范式，不需要对外暴露推送能力，仅导出带预置逻辑的数据流供外部订阅即可，完全不存在冗余问题：

import { Subject, tap } from 'rxjs';

// 模块内部持有原始Subject实例，不对外导出
const rawSubj = new Subject<string>();

// 对外导出带预置操作符的数据流
export const subj$ = rawSubj.pipe(
  tap(() => console.log('updated'))
);

// 模块内部可随时调用next推送值，所有订阅subj$的观察者都会先执行tap里的预置逻辑，再接收到值
rawSubj.next('foo');

方案2：需要外部调用next/error/complete方法 #

如果必须在模块外部触发值推送，不需要拆分导出两个独立变量，可以构造一个同时具备订阅能力和推送能力的合并对象，使用手感和原生Subject完全一致：

import { Subject, tap, Observable } from 'rxjs';

const rawSubj = new Subject<string>();
const pipedStream = rawSubj.pipe(
  tap(() => console.log('updated'))
);

export const subj$ = {
  subscribe: pipedStream.subscribe.bind(pipedStream),
  next: rawSubj.next.bind(rawSubj),
  error: rawSubj.error.bind(rawSubj),
  complete: rawSubj.complete.bind(rawSubj),
  pipe: pipedStream.pipe.bind(pipedStream)
} as Observable<string> & Pick<Subject<string>, 'next' | 'error' | 'complete'>;

// 外部使用示例
subj$.subscribe(val => console.log('接收到值：', val));
subj$.next('bar'); // 执行顺序：先打印updated，再打印接收到值：bar

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