<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">1.8.0</p>
<p dir="auto"><strong>Code</strong></p>
<p dir="auto">I'm porting my ASP.NET MVC app platform (Serenity) which were using Saltaralle C# -&gt; JS transpiler to TypeScript. Currently TS is an alternate option but hoping to make it primary soon, after resolving some issues.</p>
<p dir="auto">Saltaralle and its predecessor Script# uses some code similar to TypeScript internal modules or namespaces. So it was natural for me to choose this model over more complicated AMD/CommonJS etc. modules, which is a bit overkill for web apps in my humble opinion. Also it is much easier to explain to novice users.</p>
<p dir="auto">I'm using tsconfig.json with outFile option, and no "files" list, so all .ts files in all subfolders are included by default.</p>
<p dir="auto">If you have <em>A.ts</em>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="namespace Some {
        export class A {
        }
}"><pre class="notranslate"><span class="pl-k">namespace</span> <span class="pl-smi">Some</span> <span class="pl-kos">{</span>
        <span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">A</span> <span class="pl-kos">{</span>
        <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">and <strong>B.ts</strong>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="namespace Some {
        export class B extends A {
        }
}"><pre class="notranslate"><span class="pl-k">namespace</span> <span class="pl-smi">Some</span> <span class="pl-kos">{</span>
        <span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">B</span> <span class="pl-k">extends</span> <span class="pl-smi">A</span> <span class="pl-kos">{</span>
        <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I'd expect combined output.js file to have A defined before B, otherwise it would cause a javascript error.</p>
<p dir="auto">But, sometimes this is true, sometimes opposite. I know that you'd suggest me to put /// references or put files in correct order in tsconfig.json files property, or use external modules, but this exactly what i'm trying to avoid. I've read among several issues reported here, and workarounds offered like these, but dependency order resolving shouldn't be the job of developer, compilers are specially made for this.</p>
<p dir="auto">I'd handle these workarounds myself, for my own projects, but my targeted users (devs) usually don't have the skills to understand what this ordering is all about. They'll simply report a bug with details: "not working", and without looking at their output file, i can't even guess what it is really about.</p>
<p dir="auto">I understand that in some edge cases this might be difficult, but please offer an option to perform topological sort on input files for basic cases like this, e.g. a class extends another, references it in a decorator argument etc.</p>
<p dir="auto"><strong>Expected behavior:</strong></p>
<p dir="auto">I'd expect internal modules to be topologically sorted based on dependencies.</p>
<p dir="auto"><strong>Actual behavior:</strong></p>
<p dir="auto">Sometimes it is not. Derived class outputted before base class.</p>
<p dir="auto">There are cases, where a property can not just be any string (or a set of strings), but needs to match a pattern.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let fontStyle: 'normal' | 'italic' = 'normal'; // already available in master
let fontColor: /^#([0-9a-f]{3}|[0-9a-f]{6})$/i = '#000'; // my suggestion"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">fontStyle</span>: <span class="pl-s">'normal'</span> <span class="pl-c1">|</span> <span class="pl-s">'italic'</span> <span class="pl-c1">=</span> <span class="pl-s">'normal'</span><span class="pl-kos">;</span> <span class="pl-c">// already available in master</span>
<span class="pl-k">let</span> <span class="pl-s1">fontColor</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span>#<span class="pl-kos">(</span><span class="pl-kos">[</span>0-9a-f<span class="pl-kos">]</span><span class="pl-kos">{</span>3<span class="pl-kos">}</span><span class="pl-c1">|</span><span class="pl-kos">[</span>0-9a-f<span class="pl-kos">]</span><span class="pl-kos">{</span>6<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span>i</span> <span class="pl-c1">=</span> <span class="pl-s">'#000'</span><span class="pl-kos">;</span> <span class="pl-c">// my suggestion</span></pre></div>
<p dir="auto">It's common practice in JavaScript to store color values in css notation, such as in the css style reflection of DOM nodes or various 3rd party libraries.</p>
<p dir="auto">What do you think?</p>