Angular组件调用API成功后无法读取数据：TS2339错误求助

问题原因 #

TypeScript是强类型语言，你没给this.book指定明确类型，TS默认将其推断为空对象{}，编译阶段会因类型不匹配报错Property 'name' does not exist on type '{}'。而console.log(event.name)能正常输出是因为这是运行时操作，编译时TS无法直接推断event的具体类型，但运行时数据存在就能读取。

解决方案 #

1. 定义匹配返回数据的接口 #

在组件文件顶部定义与API返回结构一致的TypeScript接口：

interface Book {
  __typename: string;
  id: string;
  name: string;
}

2. 给组件的book属性指定类型 #

在组件类中声明book的类型为上述Book接口，同时初始化避免undefined相关问题：

book: Book = {} as Book;

3. 给API调用添加类型处理 #

方式一：调用时添加类型断言

赋值时明确告诉TSevent是Book类型：

this.api.GetBook(this.id).then((event) => {
  this.book = event as Book;   
  console.log(this.book.name); // 编译不再报错
});

方式二：优化API服务的返回类型（推荐）

如果是你维护的API服务，直接给GetBook方法指定返回类型为Promise<Book>，TS会自动推断类型，无需额外断言：

// 在你的API服务类中
GetBook(id: string): Promise<Book> {
  // 示例：基于HttpClient的请求写法
  return this.http.get<Book>(`/api/books/${id}`).toPromise();
}

4. 增加非空判断（可选但更严谨） #

因为params.get('id')可能返回null，建议增加判断避免无效请求：

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
  this.id = params.get('id'); 
  if (this.id) { // 确保id存在再发起请求
    this.api.GetBook(this.id).then((event) => {
      this.book = event as Book;   
      console.log(this.book.name);
    });
  }
})

修改后的完整组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { YourApiService } from '../services/your-api.service'; // 替换为你的API服务路径

interface Book {
  __typename: string;
  id: string;
  name: string;
}

@Component({
  selector: 'app-book-detail',
  templateUrl: './book-detail.component.html',
  styleUrls: ['./book-detail.component.css']
})
export class BookDetailComponent implements OnInit {
  id?: string;
  book: Book = {} as Book;

  constructor(
    private activatedRoute: ActivatedRoute,
    private api: YourApiService
  ) { }

  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id'); 
      if (this.id) {
        this.api.GetBook(this.id).then((event) => {
          this.book = event as Book;   
          console.log(event.name);
          console.log(this.book.name);
        });
      }
    });
  }
}

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