RxJS Observable类型报错及订阅回调差异问题咨询（含类型疑问）

我在学习RxJS的订阅机制时编写了如下代码：

export class AppComponent implements OnInit {
  title = 'hello_world_project';
  ngOnInit() {
    const rickRoll = new Observable((observable) => {
      observable.next('Never gonna give you up');
      observable.next('Never gonna let you down');
    });

    rickRoll.subscribe(this.uselessWrapperFunc);

    console.log('Rxjs is fun');
  }

  uselessWrapperFunc(message: String): void {
    console.log(message);
  }
}

运行时出现错误：Argument of type 'unknown' is not assignable to parameter of type 'String'。但如果改为rickRoll.subscribe(console.log)则能正常运行。我想了解：

• 为何console.log能正确接收Observable的值，而自定义的uselessWrapperFunc却报类型不匹配错误？
• 指定Observable的类型是否能解决该问题？

1. 错误根源：类型推断与参数兼容性 #

你遇到的问题本质是TypeScript的类型检查机制导致的：

• 当你创建rickRoll时没有指定泛型类型，TypeScript会默认把它推断为Observable<unknown>——也就是这个Observable发出的值类型是未知的。
• 你的uselessWrapperFunc明确要求参数是String类型，TypeScript会严格检查传入值的类型，unknown无法直接赋值给String，所以抛出类型不兼容的错误。
• 而console.log的参数定义是...args: any[]，它可以接受任意类型的输入，包括unknown，所以不会触发类型错误。

你觉得“传入了整个Observable对象”是误解，实际上订阅回调收到的还是Observable发出的字符串值，只是类型推断的问题让TypeScript报错了。

2. 指定Observable类型可以解决问题 #

这是最直接的解决方案，给Observable指定泛型类型string（注意TypeScript里推荐用小写string而非大写String，后者是原始值的包装对象）：

const rickRoll = new Observable<string>((observable) => {
  observable.next('Never gonna give you up');
  observable.next('Never gonna let you down');
});

指定类型后，TypeScript就能明确知道这个Observable发出的是string类型的值，和uselessWrapperFunc的参数类型匹配，错误会直接消失。

3. 额外提醒：函数上下文绑定问题 #

如果后续你的uselessWrapperFunc里需要访问组件的属性（比如this.title），直接传递this.uselessWrapperFunc会导致this指向丢失（变成undefined）。这种情况可以用两种方式处理：

• 用箭头函数包裹订阅回调：

  rickRoll.subscribe(message => this.uselessWrapperFunc(message));
  

• 在组件构造函数中绑定this：

  constructor() {
    this.uselessWrapperFunc = this.uselessWrapperFunc.bind(this);
  }
  

不过你当前的函数里没用到this，所以暂时不需要处理，但这是RxJS订阅时很容易踩的坑，提前留意没坏处。

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