如何在typescript中把JSON对象转换成接口或类？

迪鲁宾
2,325 阅读3分钟

在开发过程中，数据来自rest API，格式为JSON ，所以你需要写一段代码，在typescript中把JSON 转换为interface 或class 。

这篇文章讲述了将json转换为接口的不同方法

我们将学习将JSON对象转换为接口/类的各种方法。

这种转换是需要知道的，因为Front应用程序是用typescript编码的，并调用REST API，而REST API是调用后端服务的，并以JSON 格式返回响应。

这个JSON 对象需要转移到接口/类，以便将这些数据绑定到用户界面。

Interfacs 这个接口没有实现，但它有一些规则，实现这个接口的 classes 或objects 应该遵循它。

如何将json转换为对象或接口

开发者不需要做任何事情就可以将json转换为接口；只需按照一些规则编写代码，让typecript编译器进行转换。

首先，接口被定义为具有与JSON字段相同的属性。

并不要求将JSON对象中的所有字段都与接口匹配，但是

  • 接口字段是JSON对象的一个子集。
  • 接口字段的名称和类型应该与对象数据相匹配。

我们可以通过两种方式进行转换

  • 隐式接口转换
  • 显式接口转换

隐式接口转换

开发者不需要写任何代码来进行转换，只需要按照上面的指南，Typescript编译器会自动完成。

下面是一个使用隐式转换方法的例子

该函数返回Employee 数据


function getEmployees(): Array  {
    return  [
        { 'id': 1, 'name': 'john', 'salary': 50000 },
        {'id': 2,'name': 'Kiran','salary': 40000}
    ];
}

以下是要遵循的步骤顺序

  • 使用interface 关键字创建interface ，如下图所示。
  • 声明有三个属性的接口，不一定要声明所有的属性。你也可以根据你的要求声明两个字段，但是属性名称应该与JSON对象键的名称一致。
  • 每个JSON 对象代表Employee 对象。如果JSON对象是数组列表，那么在你的应用程序中，你应该把它映射到Array 的雇员或Employee[] 。

这里是一个用Employee.ts

interface Employee {
    id: number,
    name: string,
    salary: number
}

明确的接口转换

在这里，开发者将写一段代码来转换为接口。

当我们需要在转换到接口/类之前定制或处理一些数据时，这将是非常有用的。

使用一级函数--数组的方法map()，迭代JSON对象数组，并将元素映射到接口，如下图代码所示。


const emps = [
        { 'id': 1, 'name': 'john', 'salary': 50000 },
        {'id': 2,'name': 'Kiran','salary': 40000}
    ];
const empsClass: Employee = emps.map(obj => {
  id: obj.Id,
  name: obj.Name
});
interface Employee {
    id: number,
    name: string,
    salary: number
}

嵌套JSON对象的接口映射

在这个例子中：

  • 每个employee ，都有address ，有一对一的映射。
  • 创建了两个接口，一个用于employee ，另一个用于address
  • 在雇员接口中使用正常的数据类型声明，声明了映射address '。
  • 同样的隐式接口映射规则在这里也适用于声明address 接口。
const emps = [
    {
        'id': 1, 'name': 'john', 'salary': 50000, "address": {
            "colony": "John Road",
            "state": "NewYork",
            "country":"USA"
    }},
        {'id': 2,'name': 'Kiran','salary': 40000 "address": {
            "colony": "Stree 12",
            "state": "NewYork",
            "country":"USA"
    }}
];

    interface Employee {
    id: number,
    name: string,
    salary: number,
    address:Address
}

interface Address {
    colony: string,
    state: string,
    country:string,
}

这是我们实现映射自定义JSON对象的方式，如递归的json 类型或tree 模型数据。每个父类包含子类。我们已经看到了以上所有关于接口的例子，你也可以把JSON映射到类中。

总结

综上所述，讨论了将json转换为对象或接口的不同方法，根据你的方便，你可以选择一种方法。

avatar
文章
阅读
粉丝