Javascript 使用类型脚本的IResourceClass扩展angularjs的$resource

我正在使用Asp.NETWebAPI和AngularJS开发SPA。我还使用TypeScript获得静态类型。所以，我添加了明确输入的angularjs

因为我正在使用RESTfull服务。我想过使用angularjs的$resource。现在I$resource没有任何内置的PUT-http方法。所以我决定添加我自己的如下内容

var employees = $resource('/api/employee/:id',{id:'@id'},{"update":{ method: "PUT", isArray:false }};

现在，正如您所看到的，在正常的AngularJS中很容易做到。我想通过TypeScript路径定义扩展的自定义接口。此接口的文档说明如下

//具有默认操作的everyresource的基类。 //如果为资源定义新操作，则需要 //扩展此接口并向其类型转换ResourceClass

---

我真的不知道如何扩展这个接口。它不断地出现一些语法错误。有人能解释一下如何扩展这个接口和添加Update方法吗？Update方法反过来调用我的控制器上的PUT方法。

首先定义您的模型，这个接口将描述您的员工

// Define an interface of the object you want to use, providing it's properties
interface IEmployee extends ng.resource.IResource<IEmployee>
{
    id: number;
    firstName : string;
    lastName : string;
}

将您的

员工资源

注入控制器：

myApp.controller('TestCtrl', ['$scope', 'EmployeeResource', ($scope, Employee : IEmployeeResource) => 
{
    // Get all employees
    var employees : Array<IEmployee> = Employee.query();

    // Get specific employee, and change their last name
    var employee : IEmployee = Employee.get({ id: 123 });
    employee.lastName = 'Smith';
    employee.$save();

    // Custom action
    var updatedEmployee : IEmployee = Employee.update({ id: 100, firstName: "John" });
}]);

---

因此，在上面的例子中，我们将

IEEmployeeResource

作为

Employee

注入。然后我们可以

new

这个对象来创建一个

I员工

我完全同意Scott的回答：

我还有一个补充： 在我的项目中，我创建了类

ServiceModel

，它实现了接口

IActionDescriptor

module Common.ApiService {
    export class HttpHeaders {
        'Content-Type': string;
        Accept: string;
    }

    export class ServiceModel<T> implements ng.resource.IActionDescriptor {
        public method: string = 'GET';
        public params: T;
        public isArray: boolean = false;
        public url: string;
        public headers: HttpHeaders = new HttpHeaders()
    } 
}

module Common.ApiService{
导出类HttpHeader{
“内容类型”：字符串；
接受：字符串；
}
导出类ServiceModel实现了ng.resource.IActionDescriptor{
公共方法：string='GET'；
公共参数：T；
公共isArray:boolean=false；
公共url:string；
public headers:HttpHeaders=新的HttpHeaders（）
} 
}

然后，我可以在我的控制器中设置该方法，就像Scott那样，但是现在IDE将在标题上（以及稍后的参数上）具有类型完成

导出接口IProfileServiceResource扩展了ng.resource.IResourceClass{
SaveProfileImage（profileImageUri:Profile.Model.UserProfileModel）：ng.resource.IResource；
}
导出类配置文件服务
实现Common.ApiService.IApiServiceBase{
public SaveProfileImage:Common.ApiService.ServiceModel；
构造函数（）{
this.SaveProfileImage=new Common.ApiService.ServiceModel（）；
this.SaveProfileImage.method=“POST”；
this.SaveProfileImage.url=“/api/Profile/SaveProfileImage”；
this.SaveProfileImage.headers[“Content Type”]=“application/json”；
}

---

我这样做是为了补充回答，因为它只提供

标题

和

参数

的类型。请告诉我我的回答是否有用，或者您是否仍然停留在评论中。谢谢。AngularJS DefinitelyTyped页面上有一些关于$resource usage with TypeScript的非常有用的文档-如果发布答案时，请确保它们至少经过编译。我认为[$resource，（$resource:ng.resource.IResourceService）：IEEmployeeResource=>必须是['$resource'，（$resource:ng.resource.IResourceService）：IEEmployeeResource=>注意引号。@LocalJoost我已经修复了小的拼写错误。如果您发现拼写错误，请随意自己编辑，这就是正确的方式。请不要告诉我如何在您相对较新的社区中回答问题，这是粗鲁的。@LocalJoost它对我有效。当承诺是r时，它可能看起来是空的这就是AngularJS的工作方式。您的

Employee.query（{}，（d）=>{var a=d；}）

之所以有效，是因为它会调用解析函数并给出结果。这是精心设计的。回答非常详细。我一直在努力解决这个问题；这个回答显示了我需要修复的TS体系结构中的一些潜在缺陷。感谢你给出的完整答案和你投入的时间。@mushinoshin我添加了创建新建

ieemployee

。这是通过在注入的工厂实例上执行

new

ing来完成的。

myApp.controller('TestCtrl', ['$scope', 'EmployeeResource', ($scope, Employee : IEmployeeResource) => 
{
    // Get all employees
    var employees : Array<IEmployee> = Employee.query();

    // Get specific employee, and change their last name
    var employee : IEmployee = Employee.get({ id: 123 });
    employee.lastName = 'Smith';
    employee.$save();

    // Custom action
    var updatedEmployee : IEmployee = Employee.update({ id: 100, firstName: "John" });
}]);

myApp.controller('TestCtrl', ['$scope', 'EmployeeResource', ($scope, Employee : IEmployeeResource) => 
{
    var myEmployee : IEmployee = new Employee({ firstName: "John", lastName: "Smith"});
    myEmployee.$save();
}

module Common.ApiService {
    export class HttpHeaders {
        'Content-Type': string;
        Accept: string;
    }

    export class ServiceModel<T> implements ng.resource.IActionDescriptor {
        public method: string = 'GET';
        public params: T;
        public isArray: boolean = false;
        public url: string;
        public headers: HttpHeaders = new HttpHeaders()
    } 
}

export interface IProfileServiceResource extends ng.resource.IResourceClass<IProfileDataModelDef> {
    SaveProfileImage(profileImageUri: Profile.Model.UserProfileModel): ng.resource.IResource<Array<any>>;
}

export class ProfileApiService 
    implements Common.ApiService.IApiServiceBase<IProfileServiceResource> {

    public SaveProfileImage: Common.ApiService.ServiceModel<Profile.Model.UserProfileModel>;

    constructor() {    
        this.SaveProfileImage = new Common.ApiService.ServiceModel<Profile.Model.UserProfileModel>();
        this.SaveProfileImage.method = "POST";
        this.SaveProfileImage.url = "/api/Profile/SaveProfileImage";
        this.SaveProfileImage.headers["Content-Type"] = 'application/json';
}