Angular自定义实体接口下Observable的subscribe调用及No overload报错解决

该报错是三个叠加的代码不匹配问题共同导致的，不涉及Angular框架的特殊逻辑：

• 类型签名完全错位：Service层的getNews()方法通过泛型指定返回Observable<News>，也就是请求成功后流内推送的是单个News结构的对象；但Component订阅时把回调入参强制标注为News[]（News数组类型），TS编译阶段会校验subscribe方法的参数签名，类型对不上就直接抛出"No overload matches this call"。
• 组件属性引用错误：组件类内声明的公共存储属性是news: News[]，但回调逻辑里给根本不存在的this.newsArray赋值，属于未定义成员引用。
• 实体类型书写不规范：News接口里的something: String用了大写的包装对象类型，日常和HTTP请求返回的原始字符串值做类型校验时，很容易出现隐性的兼容问题。

场景A：后端接口返回News列表数组 #

双向对齐Service和Component的类型声明即可：

1. 修正Service层的请求泛型，把返回流的类型从单个News改为News[]：

   public getNews(): Observable<News[]> {
     // 复用类内定义的newsUrl常量，避免硬编码地址
     return this.http.get<News[]>(this.newsUrl);
   }
   

2. 修正Component的订阅逻辑，去掉多余的错误入参标注、把赋值目标改成类内已声明的属性：

   public getNews(): void {
     this.newsService.getNews().subscribe(
       // 无需手动标注入参类型，TS会自动根据Service的返回值推导正确类型
       (response) => { this.news = response }
     )
   }
   

场景B：后端接口返回单个News详情对象 #

不需要调整Service的泛型声明，只需要修正Component的订阅逻辑即可：

public getNews(): void {
  this.newsService.getNews().subscribe(
    (response: News) => { 
      // 若需要把单个对象存入数组类型的news属性，手动做结构适配
      this.news = [response] 
    }
  )
}

• 实体接口里的所有原始类型统一使用小写写法：把something: String替换为something: string，避免和TS内置的包装对象类型产生不必要的兼容问题。
• 订阅回调尽量不要手动标注入参类型，TS会沿着Service的返回泛型自动推导正确的入参类型，减少人为写错类型、写错变量名的概率。

额外提醒：如果后端接口的实际返回结构和泛型声明的结构不匹配，即使编译阶段不报错，运行时也会出现取不到值的问题，建议对齐接口返回的字段结构再做类型声明。

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