如何在Angular（TypeScript）中声明含对象数组的接口？

根据你提供的后端返回数据结构，正确的 TypeScript 接口定义需要匹配嵌套层级，以下是修正后的实现：

// 定义文章来源的子接口
export interface Source {
  id: string | null; // 后端返回可能为 null，使用联合类型兼容
  name: string;
}

// 定义单篇文章的接口
export interface Article {
  source: Source;
  author: string;
  title: string;
  description: string;
  urlToImage: string;
}

// 定义最外层的响应数据接口
export interface Noticias {
  status: string;
  totalResults: number;
  articles: Article[]; // 等价于 Array<Article>，写法更简洁
}

你之前尝试的问题说明： #

• 第一次尝试：articles 数组内的对象结构错误，没有对应后端的 source 嵌套层级，反而将 source 下的 id、name 直接放在了文章对象中，还遗漏了后端返回的 author 字段，导致结构不匹配。
• 第二次尝试：错误地将单篇文章的属性（id、name 等）定义在了 Noticias 根接口下，完全不符合后端返回的层级结构——这些属性属于 articles 数组内的子对象，且 id、name 还嵌套在 source 中。

拆分接口的好处是结构清晰，后续如果需要单独复用 Source 或 Article 类型也更方便。

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