如何将数据从 JSON API 传递到 TypeScript 模型答案

【问题标题】：How to pass data from JSON API to TypeScript models如何将数据从 JSON API 传递到 TypeScript 模型
【发布时间】：2017-06-22 04:34:52
【问题描述】：

在我的服务中，我必须将 JSON api 提供的信息传递给我的模型。最好的方法是什么？

目前我正在这样做：

import { Attachment } from '.';

export class Contact {
  id: number;
  attachments: Attachment[] = [];

  static fromJSON(data) {
    let contact = new Contact();
    contact.id = data.id;

    // Attachments?
    for(let attachment of data.attachments) {
      contact.attachments.push( Attachment.fromJSON(attachment) );
    }
    return contact;
  }
}

}

有更好的想法吗？

【问题讨论】：

标签： javascript json api angular typescript

【解决方案1】：

如果我理解得很好，您想从服务返回的 JSON 字符串中获取信息。

假设您有以下内容来获取 JSON。

   that.db.getTodoListFromServer(this)
                .done(msg => {
                    if (msg != undefined) {
                        //in msg you have your JSON object
                 })
                .fail(msg => {
                 });

此时你可以做两件事

如果您知道 JSON 字符串的类结构，则可以像在解决方案中所做的那样直接将元素逐个传递给您的模型。

2.- 使用返回的 JSON 对象的结构创建一个接口（打字稿支持接口）。在下面的示例中，我们创建了一个接口 IToDoModel。因为我们知道返回的 JSON 和我们的接口的结构是一样的，所以我们把 JSONreturn 赋值给接口时不会出错。

 export interface ToDoModel {
        Id: number;
        ToDo: string;
    }

...  

that.db.getTodoListFromServer(this)
            .done(msg => {
                 if (msg != undefined) {
                     //this json return a list of IToDoModel
                     var todo: Array<ToDoModel> = msg;
              })
            .fail(msg => {
                     //Manage Error   
             });

希望对你有帮助

【讨论】：

好答案。考虑删除 I 前缀。
谢谢哈达德。我将接口名称编辑为 PascalCase。

【解决方案2】：

最简单的方法是将附件直接投射到Array<Attachment>。

import { Attachment } from '.';

export class Contact {
  id: number;
  attachments: Attachment[] = [];

  static fromJSON(data) {
    let contact = new Contact();
    contact.id = data.id;

    // cast attachments json to `Array<Attachment>`.
    contact.attachments = <Array<Attachment>>data.attachments;

    return contact;
   }
 }
}

【讨论】：