Angular 添加接口以获取请求

我试图在我的代码中添加一个接口，但我一直在思考它的位置和放置方式。请看下面我的代码

服务台

getData() {
  return this.httpClient.get(Constants.API_ENDPOINT + 'data.json');
}

组件技术

ngOnInit() {
  this.apiService.getData().subscribe((res) => {
    console.log(res);
  });
}

Interface.ts

export interface Items {
  name: string;
  description: string;
  url: string;
}

如何更改service.ts以使用该接口？

• 在

  getData

• 使用的泛型重载定义要返回的数据的结构

getData（）：可观察{
返回这个.httpClient.get（Constants.API_ENDPOINT+'data.json'）；
}

• 在

  getData

• 使用的泛型重载定义要返回的数据的结构

getData（）：可观察{
返回这个.httpClient.get（Constants.API_ENDPOINT+'data.json'）；
}

您可以声明服务中项目类型的退货类型：-

  getData(): Observable<Items>{
     return this.httpClient.get<Items>(Constants.API_ENDPOINT + 'data.json');
  }

---

有关更多信息，请参见

您可以在您的服务中声明退货类型：-

  getData(): Observable<Items>{
     return this.httpClient.get<Items>(Constants.API_ENDPOINT + 'data.json');
  }

---

有关更多信息，请参见

作为旁注。

项目

不是该结构的好名称。它不是描述性的（一个项目作为一个名词是非常通用的），它还表示有多个实例。我会保持它的单数，并为接口类型想出一个更具描述性的名称。这可能只是您实际代码的抽象，可能您已经在这样做了，在这种情况下，请忽略此注释。作为旁注，

Items

将不是该结构的好名称。它不是描述性的（一个项目作为一个名词是非常通用的），它还表示有多个实例。我会保持它的单数，并为接口类型想出一个更具描述性的名称。这可能只是您实际代码的抽象，可能您已经在这样做了，在这种情况下，您可以忽略此注释。

  ngOnInit() {
  this.apiService.getData().subscribe((res: Items) => {
    console.log(res);
  });
}