TypeScript配合RxJS时如何初始化Observable 无初始值怎么设置空值？

问题原因 #

你遇到的报错由两个错误写法共同导致：

• 变量泛型声明错误：如果该Observable要发射的是PropsProduct类型的数组，类型应该声明为Observable<PropsProduct[]>，你当前写的Observable<PropsProduct>仅代表发射单个PropsProduct类型对象的流
• 类型不匹配：Observable是rxjs提供的流类型，不能直接赋值普通数组[]，二者不属于同一类型

初始化方案 #

根据使用场景可选以下两种方式：

方案1：初始发射空数组（推荐，适配多数列表场景） #

导入rxjs的of操作符，用它包裹空数组生成对应的Observable流即可：

import { Observable, of } from 'rxjs';

interface PropsProduct {
    id: number,
    picture: string,
    price: number,
    name: string,
    combo: boolean,
    discount: number
}

// 注意泛型为数组类型
myArray: Observable<PropsProduct[]>
  
constructor(private readonly dataService: DataService) {
  this.myArray = of([]);
}

后续需要替换为接口返回的流时，直接赋值即可：

fetchProducts() {
  this.myArray = this.dataService.fetchProductList();
}

方案2：初始无任何发射值 #

如果不需要初始发射空数组，仅需要一个合法的空Observable占位，可以直接使用rxjs提供的EMPTY常量：

import { Observable, EMPTY } from 'rxjs';

myArray: Observable<PropsProduct[]> = EMPTY;

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