As a newcomer to Typescript, I am grappling with the concept of namespaces and how to reference Interfaces that are defined in separate files. Coming from a .NET C# background, I am used to creating each class and interface in their own file.
INationalRailService:
//// <reference path="../../../../typings/tsd.d.ts" />
/// <reference path="../../../../typings/app.d.ts" />
namespace Interfaces {
export interface INationalRailService {
getDepartures(city: String): ng.IPromise<IQueryResult>;
getArrivals(city: String): ng.IPromise<IQueryResult>;
}
}
IJourney.ts
namespace Interfaces {
export interface IJourney {
locationName: string;
crs: string;
via: string;
futureChangeTo: string;
assocIsCancelled: boolean;
}
}
In the tsd.d.ts file, I have references to the frameworks I am using, such as Angular, JQuery, Typescript, toastr, and angular-route.
In my app.d.ts file, I have references to the .ts files I have created
// Interfaces
/// <reference path="../src/app/NationalRailViewerApp/Interfaces/ITrainServices.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Interfaces/INationalRailService.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Interfaces/IParameters.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Interfaces/IJourney.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Interfaces/IQueryResult.ts" />
// Implementations
/// <reference path="../src/app/NationalRailViewerApp/Implementations/QueryResult.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Implementations/Journey.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Implementations/NationalRailService.ts" />
/// <reference path="../src/app/NationalRailViewerApp/Implementations/TrainServices.ts" />
I can ensure that the various classes, controllers, and services recognize the related interfaces by adding the reference path tags to the top of my files.
Issues arise when I try to transpile this to Javascript (ES5). My gulp task runner uses gulp-typescript to output my javascript to a single .js file using the { out: 'output.js' } configuration option.
However, I receive many warnings about a 'Duplicate identifier "Interfaces" and as a result, my resulting angular module fails to load.
If I am attempting to make these interfaces available to my other files through a common namespace, why is this causing problems in the resulting Javascript?
Am I misunderstanding the namespace keyword or misusing it? Can I not use namespaces if I plan to concatenate my resulting javascript into a single file?
I have tried to resolve this issue myself by referring to the following article,
However, I am still unsure of whether I should be using namespaces or modules for this example.