1

To preface, I'm pretty comfortable with Javascript and have done well with Angular up until I saw it implemented in a project with Typescript. Between still climbing the learning curve of Angular and seeing this new way of implementation with TS, it has left me feeling pretty overwhelmed.

I paused the low-level learning of AngularJS and started going over tutorials that used the tech we're currently using: Angular. Typescript, and Entity Framework with WebApi.

I came across this example: https://blogs.msdn.microsoft.com/tess/2015/12/10/3b-services-getting-started-with-angularjs-typescript-and-asp-net-web-api/

For my actual question, I was doing fine up until the author started implementing his service. I was thinking the way I would go about it (using what I had studied and learned previously) and the author hit me with using an interface to describe the service itself:

Create the DataAccessService

  1. Create a new DataAccessService.ts file under app/common/services
  2. Add an Interface describing the DataAccessService
module app.common.services {
    interface IDataAccessService {
        getStoreResource(): ng.resource.IResourceClass<IStoreResource>;
    }
}

Ok, so from my perspective he's created a function that will be called to get the resource he wants but what's the benefit of this implementation, specifically with the interface (IDataAccessService)? Then he goes deeper down the rabbit hole and creates another interface (IStoreResource) to return a resource of another interface (IStores):

The DataAccessService will just give us access to the various API’s we may be using, in this case a resource for the stores API. We could also have methods here for getAdResource() or getProductResource() for example if we had APIs to get ads or products or similar. We tell it to return a ng.resource.IResourceClass so we’ll have to define what that is.

Declare the IStoreResource as a resource of IStores… this is to explain what types of items will be returned from or passed to the resource. This should go above the interface declaration for IDataAccessService

interface IStoreResource extends ng.resource.IResource<app.domain.IStore> { }

Pretty lost at this point but it continues:

Next we’re going to implement the DataAccessService below the IDataAccessService interface

export class DataAccessService implements IDataAccessService {
   //minification protection
   static $inject = ["$resource"]
   constructor(private $resource: ng.resource.IResourceService) { }

   getStoreResource(): ng.resource.IResourceClass<IStoreResource> {
      return this.$resource("/api/stores/:id");
   }
}

I follow this a little better as it's the piece that looks to be doing the actual work. We've got our function that will get our resource API to return the data we need. But it seems to me (and this maybe where my OOP knowledge is lacking) that these handoffs and implementations are just added complexity and I can't see the benefit.

Can someone explain this with a ELI5 or more layman's approach? Thanks!

1
  • 1
    A benefit would be the fact that interfaces allow you to decouple your code. This way you depend on abstractions instead of concrete implementations (that may change in the future). An interface can provide a stable and lasting contract between two pieces of code. Maybe reading up on OOP in general is better. :) Commented Nov 1, 2016 at 12:11

1 Answer 1

3

This is really where TypeScript shines and brings a more classical approach to object-oriented programming with JavaScript. But first, you need to know your SOLID principles, specifically in this case, the Dependency Inversion Principle (as described in toskv's comment), which states:

  • High-level modules should not depend on low-level modules. Both should depend on abstractions.
  • Abstractions should not depend on details. Details should depend on abstractions.

To put this into context, interfaces are used to describe a contract of functionality that an object requires in order to perform a given task.

Concrete objects then implement the interface providing behaviour. The dependency should be exposed via the interface, not the concrete object, since this allows loose coupling and have several advantages such as testability.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.