Модель в угловом и машинописном. Класс, подкласс и интерфейс

Question

On и Angular 7 / служба Typescript Я вызываю метод API GetTopPosts, который возвращает:

"result": [
  {
    "id": 1,
    "title": "History of Design",
    "category": {
      "id": 3,
      "name": "design"
    }
  },
  {
    "id": 2,
    "title": "Angular",
    "category": {
      "id": 4,
      "name": "code"
    }
  }
]

Модель на моем бэкэнде, из которой генерируется каждое сообщение: Ответ:

public class GetTopPostsModel {

  public class Response {  

    public Int32 Id { get; set; }
    public String Title { get; set; }  
    public CategoryModel Category { get; set; }

    public class CategoryModel {
      public Int32 Id { get; set; }
      public String Name { get; set; }
    }

  }

}

Как перевести GetTopPostsModel в Typescript?

1. Должен ли я использовать интерфейс или класс?
2. Можно ли использовать подклассы, например, CategoryModel - это подкласс Response, который является подклассом GetTopPostsModel

Примечание

В TypeScript я определяю конверт следующим образом:

export class Envelope<T> {

  result: T[];

  constructor(result: T[]) {
    this.result = result;
  }

}

Answer 1

Я считаю, что в вашем случае лучше всего было бы перевести объект в интерфейс ITopPosts, поэтому в вашем сервисе вы бы сделали что-то вроде:

getTopPosts() {
  // now returns an Observable of ITopPosts
  return this.http.get<ITopPosts>(this.configUrl);
}

А в Компоненте, использующем запрос, вы сможете проверить, чтобы возвращаемые данные соответствовали вашим требованиям, как показано ниже:

topPosts: ITopPosts;

showTopPosts() {
  this.topPostService.getTopPosts()
    .subscribe((data: ITopPosts) => this.topPosts= { ...data });
}

Интерфейс в Typescript может использовать подход, аналогичный упомянутому выше подклассу, например:

interface IInterface {
  myDate: IAnotherInterface
}

interface IAnotherInterface {
  something: myEnum
}

enum myEnum {
  1 = 'One',
  2 = 'Two'
}

Answer 2

TypeScript не является языком, основанным на классах, он использует прототип, поэтому вам лучше использовать интерфейс

Подробнее здесь

Для ваших требований, вы ищете что-то вроде этого:

export interface GetTopPostModel{
  response: Response;
}

export interface Response{
    id: number;
    title: string;
    category: Category
}

export interface Category {
      id: number;
      name: string;
}

Answer 3

Вы можете перевести это как

export interface Response {
    public number Id;
    public string Title;  
    public Category category
}

export interface Category {
      public number id;
      public string name;
    }

и воспользуйтесь услугой угловой http, чтобы получить ее:

import { HttpClient } from "@angular/common/http"

public getLatest(): Observable<Response[]> {
    return this.http.get<Response[]>("api/latest");
}

Когда объекты поступают из службы REST (а не создаются напрямую), вы можете использовать интерфейсы. Имейте в виду, что машинописный текст попадает в ловушку, а информация о типе теряется.

По этой причине форма объекта является единственной важной вещью: объект, объявляющий все поля и методы вашего интерфейса, может рассматриваться как «истинный» объект, реализующий этот интерфейс. Это немного странно, когда вы пришли из строго типизированного языка, такого как C #.

Имея это в виду, понятие «подкласс» становится «имеющим ту же форму».