为何重构后函数返回Subscription而非Observable？

你原本的add函数返回一个Observable，但重构后却提示data$是Subscription而非Observable，核心原因是RxJS中subscribe()方法的返回值不是Observable，而是Subscription对象，两种写法的差异就在这里：

原代码（正常工作） #

add() {
  let data$ = of(this.data);

  data$.subscribe((val: any) => {
    let newData = {
      id: val.length + 1,
      description: `description ${val.length + 1}`,
      completed: false
    }

    this.data.push(newData);
    console.log(this.data);
    console.log(val.length);
  });

  return data$;
}

这里data$被赋值为of(this.data)返回的Observable，后续调用data$.subscribe()只是触发订阅、执行副作用，data$本身仍然是Observable类型，所以最后返回的是正确的Observable。

重构后的代码（报错） #

add(){
  let data$ = of(this.data).subscribe((val: any) => {
    let newData = {
      id: val.length + 1,
      description: `description ${val.length + 1}`,
      completed: false
    }

    this.data.push(newData);
    console.log(this.data);
    console.log(val.length);
  });

  return data$;
}

这里你把of(this.data).subscribe(...)的结果赋值给了data$，而subscribe()方法执行后返回的是Subscription对象（用于管理订阅的生命周期，比如取消订阅），不再是原来的Observable，所以函数返回类型就错了。

正确的重构方式 #

如果想在保持返回Observable的同时执行副作用，应该用RxJS的tap操作符（专门用于执行副作用，不改变流的内容），而不是直接在赋值时调用subscribe：

add() {
  const data$ = of(this.data).pipe(
    tap((val: any[]) => {
      const newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      };
      this.data.push(newData);
      console.log(this.data);
      console.log(val.length);
    })
  );

  // 若需要立即执行副作用，单独调用subscribe
  data$.subscribe();
  return data$;
}

另外补充一点：原代码中of(this.data)发射的是当前this.data的引用，后续push操作会修改这个数组，但返回的data$仍然是发射旧的引用，如果你希望返回的Observable能发射更新后的数组，可以调整为返回新数组的Observable：

add() {
  const newData = {
    id: this.data.length + 1,
    description: `description ${this.data.length + 1}`,
    completed: false
  };
  this.data.push(newData);
  // 返回包含新数组副本的Observable，避免引用共享问题
  return of([...this.data]);
}

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