如何从 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
)。 name
和 type
类属性名称在 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 数组中获取值的总和