<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">1.8.7</p>
<p dir="auto"><strong>Issue</strong></p>
<p dir="auto">I am developing with Rails and I want to use Typescript to compile to Javascript. In IntelliJ IDEA I have enabled the compilation of Typescript to Javascript.<br>
The files are properly compiled with both <code class="notranslate">SourceName.ts</code>, <code class="notranslate">SourceName.js</code> and <code class="notranslate">SourceName.js.map</code> files generated. However, when I access the <code class="notranslate">.ts</code> file in Chrome debugger, the source code I see is the compiled Javascript, not typescript.</p>
<p dir="auto">I've tried putting them in separate folders and it still doesn't work. Only thing that works is building inline sourcemaps in the compiler, but that produces weirdly named files in the root structure of the project.</p>
<p dir="auto">EDIT: SourceMaps are properly compiled, the <code class="notranslate">.ts</code> file shows in the Chrome file tree, but has the same content as the .js file</p>
<p dir="auto">EDIT 2: I've tried compiling using the npm package <code class="notranslate">typescript</code>. I created a test file called <code class="notranslate">Testing.ts</code> and used it to demonstrate the problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Testing{
    public static MakeWarn(){
        console.log(&quot;abc&quot;);
    }
}"><pre class="notranslate"><code class="notranslate">class Testing{
    public static MakeWarn(){
        console.log("abc");
    }
}
</code></pre></div>
<p dir="auto">I ran <code class="notranslate">tsc Testing.ts --sourceMap</code> which generated two files</p>
<ul dir="auto">
<li><code class="notranslate">Testing.js</code></li>
<li><code class="notranslate">Testing.js.map</code></li>
</ul>
<p dir="auto">The contents are as follows:</p>
<p dir="auto">Testing.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log(&quot;abc&quot;);
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map"><pre class="notranslate"><code class="notranslate">var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log("abc");
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map
</code></pre></div>
<p dir="auto">Testing.js.map</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{&quot;version&quot;:3,&quot;file&quot;:&quot;Testing.js&quot;,&quot;sourceRoot&quot;:&quot;&quot;,&quot;sources&quot;:[&quot;Testing.ts&quot;],&quot;names&quot;:[],&quot;mappings&quot;:&quot;AAAA;IAAA;IAIA,CAAC;IAHiB,gBAAQ,GAAtB;QACI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACL,cAAC;AAAD,CAAC,AAJD,IAIC&quot;}"><pre class="notranslate"><code class="notranslate">{"version":3,"file":"Testing.js","sourceRoot":"","sources":["Testing.ts"],"names":[],"mappings":"AAAA;IAAA;IAIA,CAAC;IAHiB,gBAAQ,GAAtB;QACI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACL,cAAC;AAAD,CAAC,AAJD,IAIC"}
</code></pre></div>
<p dir="auto">To my knowledge, these are properly defined <code class="notranslate">.js</code> and <code class="notranslate">.js.map</code> files.</p>
<p dir="auto">When I open the link in Chrome, I get <code class="notranslate">Testing.self.js</code> and <code class="notranslate">Testing.ts</code> files which both have contents</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log(&quot;abc&quot;);
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map"><pre class="notranslate"><code class="notranslate">var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log("abc");
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map
</code></pre></div>
<p dir="auto">This is not the expected behaviour. To my understanding, <code class="notranslate">.ts</code> file should look like the original source in Chrome debugger. And I should be able to put a breakpoint.</p>
<p dir="auto"><strong>Expected behavior:</strong></p>
<p dir="auto">Should have different files for .ts and .js</p>
<p dir="auto"><strong>Actual behavior:</strong></p>
<p dir="auto">In Chrome and Firefox Developer Edition has the same files for .ts and .js</p>
<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">1.8.7</p>
<p dir="auto"><strong>Issue</strong></p>
<p dir="auto">I am developing with Rails and I want to use Typescript to compile to Javascript. In IntelliJ IDEA I have enabled the compilation of Typescript to Javascript.<br>
The files are properly compiled with both <code class="notranslate">SourceName.ts</code>, <code class="notranslate">SourceName.js</code> and <code class="notranslate">SourceName.js.map</code> files generated. However, when I access the <code class="notranslate">.ts</code> file in Chrome debugger, the source code I see is the compiled Javascript, not typescript.</p>
<p dir="auto">I've tried putting them in separate folders and it still doesn't work. Only thing that works is building inline sourcemaps in the compiler, but that produces weirdly named files in the root structure of the project.</p>
<p dir="auto">SourceMaps are properly compiled, the <code class="notranslate">.ts</code> file shows in the Chrome file tree, but has the same content as the .js file</p>
<p dir="auto">I've tried compiling using the npm package <code class="notranslate">typescript</code>. I created a test file called <code class="notranslate">Testing.ts</code> and used it to demonstrate the problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Testing{
    public static MakeWarn(){
        console.log(&quot;abc&quot;);
    }
}"><pre class="notranslate"><code class="notranslate">class Testing{
    public static MakeWarn(){
        console.log("abc");
    }
}
</code></pre></div>
<p dir="auto">I ran <code class="notranslate">tsc Testing.ts --sourceMap</code> which generated two files</p>
<ul dir="auto">
<li><code class="notranslate">Testing.js</code></li>
<li><code class="notranslate">Testing.js.map</code></li>
</ul>
<p dir="auto">The contents are as follows:</p>
<p dir="auto">Testing.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log(&quot;abc&quot;);
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map"><pre class="notranslate"><code class="notranslate">var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log("abc");
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map
</code></pre></div>
<p dir="auto">Testing.js.map</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{&quot;version&quot;:3,&quot;file&quot;:&quot;Testing.js&quot;,&quot;sourceRoot&quot;:&quot;&quot;,&quot;sources&quot;:[&quot;Testing.ts&quot;],&quot;names&quot;:[],&quot;mappings&quot;:&quot;AAAA;IAAA;IAIA,CAAC;IAHiB,gBAAQ,GAAtB;QACI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACL,cAAC;AAAD,CAAC,AAJD,IAIC&quot;}"><pre class="notranslate"><code class="notranslate">{"version":3,"file":"Testing.js","sourceRoot":"","sources":["Testing.ts"],"names":[],"mappings":"AAAA;IAAA;IAIA,CAAC;IAHiB,gBAAQ,GAAtB;QACI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACL,cAAC;AAAD,CAAC,AAJD,IAIC"}
</code></pre></div>
<p dir="auto">To my knowledge, these are properly defined <code class="notranslate">.js</code> and <code class="notranslate">.js.map</code> files.</p>
<p dir="auto">When I open the link in Chrome, I get <code class="notranslate">Testing.self.js</code> and <code class="notranslate">Testing.ts</code> files which both have contents</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log(&quot;abc&quot;);
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map"><pre class="notranslate"><code class="notranslate">var Testing = (function () {
    function Testing() {
    }
    Testing.MakeWarn = function () {
        console.log("abc");
    };
    return Testing;
}());
//# sourceMappingURL=Testing.js.map
</code></pre></div>
<p dir="auto">This is not the expected behaviour. To my understanding, <code class="notranslate">.ts</code> file should look like the original source in Chrome debugger. And I should be able to put a breakpoint.</p>
<p dir="auto"><strong>Expected behavior:</strong></p>
<p dir="auto">Should have different files for .ts and .js</p>
<p dir="auto"><strong>Actual behavior:</strong></p>
<p dir="auto">In Chrome and Firefox Developer Edition has the same files for .ts and .js</p>