Angular 和 Typescript 中的模型。 Class、SubClass 和接口

Question

On and Angular 7 / Typescript 服务我正在调用 GetTopPosts API 方法 returns:

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

在我的后端生成每个 post 的模型是 Response:

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？

我应该使用界面还是class？
是否可以使用子class，例如，CategoryModel 是 Response 的子class，Response 是 GetTopPostsModel

备注

在 TypeScript 中，我定义信封如下：

export class Envelope<T> {

  result: T[];

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

}

Answer 1

你可以翻译成

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

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

并使用 angular http 服务获取它：

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

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

当实体来自 REST 服务（而不是直接创建）时，您可以使用接口。请记住，打字稿会被破坏并且类型信息会丢失。

因此，对象的形状是唯一重要的事情：声明接口的所有字段和方法的对象可以被视为实现该接口的 "true" 对象。当您来自 C# 等强类型语言时，这有点奇怪。

考虑到这一点，"subclass" 的概念就变成了 "has the same shape"。

Answer 2

我相信在你的情况下最好将对象转换为接口 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 3

TypeScript 不是基于 class 的语言，它使用原型，所以你最好使用接口

阅读更多here

根据您的要求，您正在寻找这样的东西：

export interface GetTopPostModel{
  response: Response;
}

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

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

Angular 和 Typescript 中的模型。 Class、SubClass 和接口

Model in Angular and Typescript. Class, SubClass and Interface

typescript

angular

angular6

angular7