Angular中TS2322错误：response.body无法赋值给Stock[]类型属性

错误原因很明确：当使用observe: 'response'配置发起请求时，HttpResponse的body属性类型为T | null（这里你指定的T是Stock[]），而你的stocks属性是严格的Stock[]类型，直接赋值会因为body可能为null触发类型不匹配错误。

以下是几种合规的处理方式：

1. 显式检查body是否非空后赋值 #

通过条件判断排除null的可能性，同时处理异常场景：

this.http.get<{headers: HttpHeaders, body: Stock[]}>('https://www.example.com/wp-json/wp/v2/stock/', {
  observe: 'response'
}).subscribe((response) => {
  this.total = Number(response.headers.get('X-WP-Total'));
  this.total_pages = Number(response.headers.get('X-WP-TotalPages'));

  if (response.body) {
    this.stocks = response.body;
  } else {
    // 接口未返回数据时的兜底处理，比如保持空数组
    this.stocks = [];
    // 也可以添加日志或用户提示
    console.warn('接口未返回股票数据');
  }
});

2. 使用空值合并运算符简化兜底逻辑 #

利用??运算符直接在body为null时用空数组兜底：

this.http.get<{headers: HttpHeaders, body: Stock[]}>('https://www.example.com/wp-json/wp/v2/stock/', {
  observe: 'response'
}).subscribe((response) => {
  this.total = Number(response.headers.get('X-WP-Total'));
  this.total_pages = Number(response.headers.get('X-WP-TotalPages'));

  this.stocks = response.body ?? [];
});

3. 类型断言（仅在确定body不会为null时使用） #

如果你能100%确认接口始终会返回Stock[]类型的body，可以用类型断言跳过检查，但这种方式会丢失部分类型安全，需谨慎使用：

this.http.get<{headers: HttpHeaders, body: Stock[]}>('https://www.example.com/wp-json/wp/v2/stock/', {
  observe: 'response'
}).subscribe((response) => {
  this.total = Number(response.headers.get('X-WP-Total'));
  this.total_pages = Number(response.headers.get('X-WP-TotalPages'));

  this.stocks = response.body as Stock[];
});

不建议使用Stock[]|any的临时方案，这会完全丧失TypeScript的类型检查优势，上述方法既能解决类型错误，又能保留类型安全特性。

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