在 Angular 应用程序中将 JSON 解析为 Typescript 类

Posted 2023-03-13

【中文标题】在 Angular 应用程序中将 JSON 解析为 Typescript 类

【英文标题】：Parse JSON to Typescript class in Angular app

【发布时间】：2016-04-24 19:09:09

【问题描述】：

我正在创建一个使用 Angular 和 typescript 的应用程序。一切都很好地融合在一起，但有一个问题困扰着我。

我定义了我想在应用程序中传递的实体/模型类，这些类的数据来自 $resource 调用的 JSON。

这是一个模型类的例子：

module app.domain 

    export interface IJob 
        id: number;
        jobTitle: string;
        jobDescription: string;
    

    export class Job implements IJob 

       constructor(public id:number, public jobTitle: string, public jobDescription: string) 

       
    

我通过返回资源的服务访问我的 JSON 资源：

namespace app.services 
    'use strict';

    interface IDataService 
        getJobResource(): angular.resource.IResourceClass<IJobResource>
    

    interface IJobResource extends angular.resource.IResource<app.domain.IJob>

    

    export class DataService implements IDataService 

        static $inject: Array<string> = ['$log','$resource','ApiDataEndpoint'];
        constructor(
                    private $log: angular.ILogService,
                    private $resource: angular.resource.IResourceService,
                    private ApiDataEndpoint          
            )

        getJobResource(): angular.resource.IResourceClass<IJobResource>
            return this.$resource(this.ApiDataEndpoint.url + 'job/:id',);
        
    

    angular
        .module('app.services',[])
        .service('dataService', DataService);

这是出错的地方，当我将资源调用的结果转换为 Ijob 打字稿限制我调用与接口中的名称不匹配的属性（如预期的那样）但因为这仍然只是 JSON 我'我无法进行方法调用，并且如果 IJob 接口中的属性与 JSON 结果中的名称不匹配，我将一无所获。

所以，我的问题是：实现一个服务的正确方法是什么，该服务调用一个返回 JSON 的 restfull 端点，然后返回一个对象数组或单个对象。该方式应支持 JSON 和对象上的名称可能不匹配。

【问题讨论】：

您可以创建一个装饰器类，将接口作为构造函数参数之一。然后你就可以做新的工作（数据）。

@toskv 很有趣，您能否详细说明一下这个答案，或者举个小例子？

我添加了回复，希望这适合您的问题。 :)

【参考方案1】：

您可以创建一个具有您需要的功能的类并获得一个 IJob 对象来使用。

module app.domain 

    export interface IJob 
        id: number;
        jobTitle: string;
        jobDescription: string;
    

    export class Job 
       // keep the data received from the server private
       constructor(private jobData: IJob) 

       // class methods
       public isIdGreaterThanTen(): boolean 
         return this.jobData.id > 0;
       

       // expose the properties of the IJob interface via getters and setters
       public get id(): number  
         return this.jobData.id;
       

       public set id(id: number): void 
         this.jobData.id = id;
       

       // so on for all properties if needed
       // ...

    

在服务中，您可以使用 $resource 的 transformResponse 功能创建并返回 Job 类的新实例，而不是服务器返回的对象。

namespace app.services 
    'use strict';

    interface IDataService 
        getJobResource(): angular.resource.IResourceClass<IJobResource>
    

    // use the Job class instead of the interface
    interface IJobResource extends angular.resource.IResource<app.domain.Job>

    

    export class DataService implements IDataService 

        static $inject: Array<string> = ['$log','$resource','ApiDataEndpoint'];
        constructor(
                    private $log: angular.ILogService,
                    private $resource: angular.resource.IResourceService,
                    private ApiDataEndpoint          
            )

        getJobResource(): angular.resource.IResourceClass<IJobResource>
            return this.$resource(this.ApiDataEndpoint.url + 'job/:id',,
            
              get: 
                method: 'GET',
                transformResponse: function(data: IJob) 
                  return new Job(data); // create a new instance of the Job class and return it
                
              
            );
        
    

    angular
        .module('app.services',[])
        .service('dataService', DataService);

【讨论】：

这看起来很有趣。我明天试试看。