Typescript namespaces and duplicate identifiers in concatenated js file
<p>I'm new to Typescript and am trying to get my head around namespaces and how to reference Interfaces which were defined in separate files.  I'm coming from a .NET C# background, so what I'm used to is to create each class &amp; interface in their own file.</p>

<p>INationalRailService:</p>

<pre><code>//// &lt;reference path="../../../../typings/tsd.d.ts" /&gt;
/// &lt;reference path="../../../../typings/app.d.ts" /&gt;

namespace Interfaces {
    export interface INationalRailService {
        getDepartures(city: String): ng.IPromise&lt;IQueryResult&gt;;
        getArrivals(city: String): ng.IPromise&lt;IQueryResult&gt;;
    }
}
</code></pre>

<p>IJourney.ts</p>

<pre><code>namespace Interfaces {
    export interface IJourney {
        locationName: string;
        crs: string;
        via: string;
        futureChangeTo: string;
        assocIsCancelled: boolean;
    }
}
</code></pre>

<p>In the tsd.d.ts I have references to the frameworks I'm using, namely Angular, JQuery, Typescript, toastr and angular-route.</p>

<p>In my app.d.ts file I have references to the .ts files I've created</p>

<pre><code>// Interfaces
/// &lt;reference path="../src/app/NationalRailViewerApp/Interfaces/ITrainServices.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Interfaces/INationalRailService.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Interfaces/IParameters.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Interfaces/IJourney.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Interfaces/IQueryResult.ts" /&gt;

// Implementations
/// &lt;reference path="../src/app/NationalRailViewerApp/Implementations/QueryResult.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Implementations/Journey.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Implementations/NationalRailService.ts" /&gt;
/// &lt;reference path="../src/app/NationalRailViewerApp/Implementations/TrainServices.ts" /&gt;
</code></pre>

<p>I can get the various classes, controllers and services to recognise the related interfaces by adding the reference path tags to the top of my files.</p>

<p>My problems arise when I attempt 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.</p>

<p>However I get a load of warnings about there being a 'Duplicate identifier "Interfaces" and subsequently, my resulting angular module will not load.</p>

<p>If I'm to make those interfaces available to my other files through a common namespace, why is this then causing me problems in the resulting Javascript?</p>

<p>Am I misusing the namespace keyword or misunderstanding how this is supposed to work?  Can I not use namespaces if I intend to concatenate my resulting javascript into a single file?</p>

<p>I've tried to fix this myself by reading the following article, </p>

<p><a href="https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Namespaces.md" rel="nofollow">Typescript Namespaces</a></p>

<p>but I just can't get my head around which I'm supposed to use for this example, namespaces or modules.</p>