Добавление интерфейса для получения запроса

Question

Я пытаюсь добавить интерфейс в мой код, но застрял в том, где и как его разместить. Пожалуйста, смотрите мой код ниже.

Service.ts

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

Component.ts

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

Interface.ts

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

Как бы Я изменяю service.ts для использования интерфейса?

Answer 1

• Определите тип возврата для getData
• Используйте перегрузку c generic HttpClient.get<T> для определения структуры возвращаемых данных.

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

Answer 2

Вы можете объявить тип возврата типа Предметов в вашем сервисе: -

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

И в вашем компоненте вы можете сделать это: -

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

Для получения дополнительной информации см. документация