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

Posted 2023-03-13

【中文标题】打字稿：将 JSON 对象转换为类/接口对象

【英文标题】：Typescript: Convert JSON object to a class/interface object

【发布时间】：2018-10-10 03:47:06

【问题描述】：

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

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

API 响应示例：

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

打字稿类

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

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

【问题讨论】：

不想添加另一个答案，因为已经提到了两种可能性。最好的方法是遍历您的响应并根据您的类创建新对象并返回它们。您不应该强制转换结果，因为这只是欺骗 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