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

Question

我正在创建一个使用 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 和对象上的名称可能不匹配。

Answer 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);
}