In my project, I am working with Angular 1.5.x using TypeScript in combination with restangular to access a remote API. Here is an overview of the scenario:
The API endpoint I am connecting to is
http://localhost:53384/api/timezones[
{
"code":"Dateline Standard Time",
"name":"(UTC-12:00) International Date Line West"
},
{
"code":"UTC-11",
"name":"(UTC-11:00) Coordinated Universal Time-11"
},
{
"code":"Hawaiian Standard Time",
"name":"(UTC-10:00) Hawaii"
}
]
Within my AngularJs application on the client side written in TypeScript:
Configuring Restangular with restangularProvider: restangular.IProvider
restangularProvider.setBaseUrl("http://localhost:53384/api");
Defining the TimeZone object representation in TypeScript
module app.blocks {
"use strict";
export class TimeZone {
public code: string;
public name: string;
}
}
Creating a factory(restangular.IService) to wrap the restangular 'timezones' resource
module app.services {
factory.$inject = ["Restangular"];
function factory(restangular: restangular.IService): restangular.IElement {
return restangular.all("timezones");
}
angular
.module("app.services")
.factory("app.services.TimeZonesRestangular", factory);
}
There are two main issues I am encountering:
When observing the response from the successCallback in the getTimeZones() method, it seems that the defined type
TimeZone[]does not accurately represent the returned data structure. The objects in the array have additional properties related to restangular features. How can I update the interface definition to account for these extra attributes?Is there any example or guideline available demonstrating how to handle similar situations in TypeScript?
Any insights or advice would be greatly appreciated. Thank you.