Typescript Snippet - $resource

Mit Hilfe des Angular $resource Service, kann auf einfache Art und Weise eine RESTful API angespochen werden.

Für den typisierten Zugriff mit Typescript gestaltet sich die Anwendung des $resource Service ein wenig aufwendiger. In einem ersten Schritt muss eine Resource als Interface definiert werden, welche von IResource erbt.

export interface IMyData extends ng.resource.IResource<IMyData> {
  id: number;
  name: string;
}

Als nächstes wird eine eigene ResourceClass definiert, die von IResourceClass ableitet. Dieses Vorgehen hat den Vorteil, dass zu den Default-Methoden (delete, get, query, remove und save) des IResourceClass Interface eigene Methoden definiert werden können.

export interface IMyDataResource extends ng.resource.IResourceClass<IMyData> {
  mymethod: ng.resource.IResourceArrayMethod<IMyData>;
}

Der $resource Service wird nun mit Hilfe einer Type Assertion erzeugt und konfiguriert.

namespace App {
  "use strict";

  export interface IDataContext {
    mydata(): IMyDataResource;
  }

  class DataContext implements IDataContext {
    static $inject = ["$resource"];
    constructor(private $resource: angular.resource.IResourceService) {}

    public mydata(): IMyDataResource {
      let methodDescriptor: angular.resource.IActionDescriptor;
      return this.$resource(
        "/your/api",
        { id: "@id" },
        {
          mymethod: (methodDescriptor = { method: "GET", isArray: true }),
        }
      ) as IMyDataResource;
    }
  }

  angular.module("app").service("DataContext", DataContext);
}