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
- Create a new DataAccessService.ts file under app/common/services
- 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!