AngularJS $resource in TypeScript

AnuglarJS’s $resource service is available in TypeScript with adding reference for DefinitelyTyped file.

/// 

var productRepository = $resource('http://localhost:44312/api/products/:id', { id: '@Id' });
$scope.products = productRepository.query();

Enable Intellisense

Intellisense for properties are enabled according to the defined type.

/// <reference path="typings/angularjs/angular.d.ts" />

interface Product {
  Id: number;
  Name: string;
  Price: number;
}

app.controller('myCtrl', function ($scope, $resource) {
    var productRepository = $resource<Product>('http://localhost:44312/api/products/:id', { id: '@id' });

    $scope.updatePrice = function(productId, newPrice){
        var product = productRepository.get({ id: productId });
        // Intellisense enabled
        product.Price = newPrice;
        product.$save();
    };
}

However, intellisense for $save, $remove and other $resource methods are disabled in this way.

Enable Intellisense for both properties and $resource methods

Intellisense for both properties and $resource methods will be enabled for a type derived from IResourceClass.
IResourceClass is generic and T must be specified as derived class name (“Product”).

interface Product extends IResourceClass<Product>{
  Id: number;
  Name: string;
  Price: number;
}