How to use AngularJS ng.resource.IResource with TypeScript.

app.ts

/// <reference path="angular.d.ts" />
/// <reference path="angular-resource.d.ts" />

interface IEmployee extends ng.resource.IResource<IEmployee>
{
    id: number;
    firstName : string;
    lastName : string;
}
interface IEmployeeResource extends ng.resource.IResourceClass<IEmployee>
{
    update(IEmployee) : IEmployee;
}

angular
    .module('myapp', ['ngResource'])
    .factory('EmployeeResource', ['$resource', ($resource : ng.resource.IResourceService) : IEmployeeResource => {

        // Define your custom actions here as IActionDescriptor
        var updateAction : ng.resource.IActionDescriptor = {
            method: 'PUT',
            isArray: false
        };

        // Return the resource, include your custom actions
        return <IEmployeeResource> $resource('/api/employee/:id', { id: '@id' }, {
            update: updateAction
        });

    }])
    .controller('TestCtrl', ['EmployeeResource', (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" });
    }]);

The types for this have always been a bit confusing. Thanks for the concise example :)

Wouldn't Employee.get() have to be synchronous for lines 38 and 39 to work?

How about a Create? I can't do new IEmployee() or something. So how can I instantiate a new object?

@Kajvdh you can instantiate a new object using var newEmployee = new Employee(), then call newEmployee.$save() to save it.

@luxifertran, where is the constructor for new Employee() defined?

@scottmcarthur
update(IEmployee) : IEmployee;
should be
update(employee : IEmployee) : IEmployee;

You should also modify the IEmployee interface:

interface IEmployee extends ng.resource.IResource<IEmployee>
{
    id: number;
    firstName : string;
    lastName : string;
    $update(): IPromise<IEmployee>
}

The problem with this method is that you cannot implement the IEmployee interface without having to write all the $ methods ($get, $save...)
I'm looking for a solution to that.

@ahasall: why do you need to implement this Interface?

Thanks ! Save me day!

Can anyone help implement this using a Service instead of a factory? I am trying to implement a custom Copy action and here is what I have so far

module rebateMaintenance.common {

interface IDataAccessService {
    getCopyRebateResource(): ICopyRebateResourceClass;
}


interface ICopyRebateResource
    extends ng.resource.IResource<domain.ICopyRebate> {
    $copy(): ng.IPromise<domain.ICopyRebate>
}

interface ICopyRebateResourceClass
    extends ng.resource.IResourceClass<ICopyRebateResource> {
    copy: any;
}
export class DataAcessService
    implements IDataAccessService {

    static $inject = ["$resource"];
    constructor(private $resource: ng.resource.IResourceService) {

    }

    getCopyRebateResource(): ICopyRebateResourceClass {
        return this.$resource("http://localhost:48679/copyrebate/:id", null,
            {
                copy: { method: 'POST' }
            }
        )
    }


}
angular.module("common.services")
    .service("dataAccessService",
    DataAcessService);
}

i made a customize version of ngResource, which i transform result after they become ready, the original function transformResponse change and destroy type of data, so i intruduce a new function called transformResult, but how should i introduce this callback/config to the TS ?