打字稿：将 JSON 对象转换为类/接口对象答案

【问题标题】：Typescript: Convert JSON object to a class/interface object打字稿：将 JSON 对象转换为类/接口对象
【发布时间】：2018-10-10 03:47:06
【问题描述】：

我正在尝试将 API 响应转换为 typescript 类/接口。

这里 API 返回一个包含一些属性的对象列表，但我只需要响应对象的几个属性。

API 响应示例：

[{ “身份证”：1， '名称'：'测试'， '描述：'测试'， 'PropertyX': 'x', 'PropertyY'：'y' }, ...]

打字稿类

类响应{ 标识：字符串；名称：字符串； }

您能否建议我将 JSON 对象转换为 typescript 对象的最佳方法。

【问题讨论】：

不想添加另一个答案，因为已经提到了两种可能性。最好的方法是遍历您的响应并根据您的类创建新对象并返回它们。您不应该强制转换结果，因为这只是欺骗 TypeScript 编译器的一种方法，并且可能导致奇怪的问题。

标签： json angular class typescript

【解决方案1】：

我建议创建一个界面来描述您在应用中使用的属性，而忽略其余部分：

所以假设你的回复是这样的：

const response = [{
      'Id' : 1,
      'Name': 'test',
      'Description': 'Test',
      'PropertyX': 'x',
      'PropertyY' : 'y'
    }, {
      'Id' : 2,
      'Name': 'test2',
      'Description': 'Test2',
      'PropertyX': 'x2',
      'PropertyY' : 'y2'
    }
];

而您只对Id 和Name 感兴趣，只需创建如下界面即可：

interface IMyObject {
  Id: String;
  Name: String;
}

然后在您应用的其余部分中，您可以将回复投射到IMyObject[]

例如，如果一个函数使用您的响应：

function myFunction(response: IMyObject[]) { ... }

或者如果您需要返回该类型，您可以像这样进行直接转换：

return response as MyObject[];

编辑：正如下面评论中提到的，简单地将您的对象转换为 IMyObject 不会删除您不感兴趣的额外属性。

为此，请使用.map:

const formattedResponse: IMyObject = reponse.map(item => {
  Id: item.Id,
  Name: item.Name
});

【讨论】：

这绝对不是要走的路。这可能是一种黑客行为，但这不是它应该如何工作的。因为您的对象仍将包含其他属性，只是对于 TypeScript，它们是不可见的。想象一下将此对象发送到 API，因为您认为其中只有 Id 和 Name，但实际上您发送了更多数据。铸造不会删除或更改任何属性。我强烈建议不要使用这种方法
编辑了我的答案以反映您的评论，我同意。干杯

【解决方案2】：

你可以使用 forEach 方法并使用您需要的属性创建一个新对象。

myarray=[];
 ngOnInit() {
     this.myvalues();

  }


    myMethod()
        {
           const response = [{
            'Id' : 1,
            'Name': 'test',
            'Description': 'Test',
            'PropertyX': 'x',
            'PropertyY' : 'y'
          }, {
            'Id' : 2,
            'Name': 'test2',
            'Description': 'Test2',
            'PropertyX': 'x2',
            'PropertyY' : 'y2'
          }
        ];

        response.forEach(value=>{
         this.myarray.push(
               {
                'ID':value.Id,
               'Name':value.Name
              }
            )
        });
        console.log(this.myarray);

WORKING DEMO

【讨论】：