Angular中TypeScript报错：无法用'course'索引Object类型

问题根源在于Angular的HttpClient.get()默认将响应推断为Object类型，TypeScript无法确认该类型包含course属性，因此抛出索引类型错误。以下是几种可行的解决方式：

方法1：为HttpClient.get()指定泛型类型 #

定义响应结构的接口，明确告诉TypeScript返回数据的格式，保留类型校验优势：

// 先定义响应结构接口
interface CursoResponse {
  course: Curso[];
}

// 修改obterCursos方法
obterCursos(): Observable<Curso[]> {
  return this.http.get<CursoResponse>(this.url + "list").pipe(
    map((res) => {
      this.vetor = res.course;
      return this.vetor;
    })
  );
}

方法2：使用类型断言 #

无需额外定义接口，直接对响应做类型断言，明确其实际结构：

obterCursos(): Observable<Curso[]> {
  return this.http.get(this.url + "list").pipe(
    map((res) => {
      this.vetor = (res as { course: Curso[] }).course;
      return this.vetor;
    })
  );
}

方法3：临时转为any类型（不推荐长期使用） #

可快速消除错误，但会失去TypeScript的类型检查能力，仅适合临时调试：

obterCursos(): Observable<Curso[]> {
  return this.http.get(this.url + "list").pipe(
    map((res: any) => {
      this.vetor = res['course'];
      return this.vetor;
    })
  );
}

优先推荐方法1，它能让代码保持类型安全，提升可维护性。

内容的提问来源于stack exchange，提问作者Marco Aurélio Lopes Júnior