如何从 Json 数据创建 TypeScript 类? [复制]

Posted

技术标签:

【中文标题】如何从 Json 数据创建 TypeScript 类? [复制]【英文标题】:How to create TypeScript class from Json data? [duplicate] 【发布时间】:2021-12-06 19:27:30 【问题描述】:

我正在使用 Angular 调用外部 API。 Json 数据格式如下:

[
      
        "AccessGroupsIdList": [],
        "FirstName": "Greg",
        "LastName": "Tipton",
        "LocationIdList": [],
        "PermissionProfile": 
          "Name": "Agent",
          "PermissionProfileId": 
            "ID": "xy678219-bd7c-103d-b56b-1f1234a85990"
          ,
          "Type": 3
        ,
        "ManagerName": "Gilchrist, George",
        "Status": true,
        "UserGroupID": 
          "ID": "00000000-0000-0000-0000-000000000000"
        ,
        "UserGroupName": "ROOT",
        "UserId": 
          "ID": "4445cc66-819a-4da0-8fbf-d0bb8ce65941"
        
      
    ]

由于 json 数据是嵌套的,如何在 typescript 中创建一个类来读取它?

export class Employees

    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile ??
    ManagerName: string;
    Status: boolean;
    UserGroupID ??
    UserGroupName : string;
    UserId ??

请指导如果PermissionProfile,PermissionProfile会是单独的嵌套类吗?

我如何声明这些?

【问题讨论】:

【参考方案1】:

尝试如下声明 Typescript 类结构:

export class Employees

    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile: PermissionProfile;
    ManagerName: string;
    Status: boolean;
    UserGroupId: UserGroupID;
    UserGroupName : string;
    UserId: UserID;


export class PermissionProfile 

    name: string;
    permissionProfileId: PermissionProfileID;
    type: string;


export class PermissionProfileID

    id: string;

 
export class UserGroupID

    id: string;


export class UserID

    id: string;

我建议使用 Id 一致地命名属性名称(例如使用 UserGroupId)。 nametype 类属性名称在 TypeScript 中有效(与 C# 语法不同)。

【讨论】:

我个人建议在这里使用interface 而不是class,但这通常是人们做这类事情的方式。始终可以从 XHR 请求中键入输出,这样您就不会从 TS 编译器中得到错误。 我会使用接口,而且不需要单独的 id 类,而是创建一个泛型 Nonik/Jhecht,如果你建议使用接口,每个类都会被接口替换吗?或者这里的每个嵌套类都是接口,实现类是普通类? 如果结构在应用程序中被实例化,那么可以使用结构的类声明,否则声明为接口用于类型检查。这取决于以后的其他应用程序要求。【参考方案2】:

为了扩展 Andrew Halil 的回答,我会在您的定义中使用接口而不是类,因为似乎没有涉及任何类方法;您只是在描述从服务器返回的 JSON 对象的形状

export interface Employee

    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile: PermissionProfile;
    ManagerName: string;
    Status: boolean;
    UserGroupId: ID;
    UserGroupName : string;
    UserId: ID;


export interface PermissionProfile 

    name: string;
    permissionProfileId: ID;
    type: string;


export interface ID

    id: string;

 

现在就实现而言,我不太使用 Angular,但你会做这样的事情来输入项目


async function listEmployees(): Promise<Employee[]> 
// Make a fetch call to the API endpoint
   const data = await fetch('https://some-api-endpoint.web/employees')
      // if the response comes back ok, return the JSON-ified response.
      .then(res => 
          if(res.ok) return res.json()
          return [];
      );
    // Instruct typescript that "data" is to be treated as an array of Employee elements.
    return data as Employee[]

【讨论】:

以上是关于如何从 Json 数据创建 TypeScript 类? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何从Typescript中以#或@开头的属性获取JSON数据

如何使用 Typescript 进行 AJAX 请求? (使用 JSON)

如何从 Typescript 中的 package.json 获取版本?

如何从 Angular2(Typescript)中的 Json 数组中获取值的总和

如何使用 VueJS / Typescript 导入 JSON 文件?

如何让 npm 从 GitHub url 安装 typescript 依赖项?