将JSON解析为Angular app中的Typescript类

Question

我正在创建一个应用程序使用角度和打字稿.一切都很好地融合在一起,但有一个问题让我感到困惑.

我定义了我想在应用程序中传递的实体/模型类,类的数据来自$ 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 typescript时,限制我调用与接口中的名称不匹配的属性(如预期的那样),但因为这仍然只是JSON我无法make方法调用,如果IJob接口的属性与JSON结果中的名称不匹配,我什么也得不到.

所以,我的任务是:实现调用restfull端点的服务的正确方法是什么,该服务返回JSON然后返回一个对象数组或一个对象.这种方式应该支持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);
}