<p dir="auto">When transpiling <code class="notranslate">js</code> files with the new <code class="notranslate">allowJs</code> param and <code class="notranslate">jsx:"preserve"</code>, all <code class="notranslate">js</code> files are output with <code class="notranslate">jsx</code> extention. Here is my tsconfig.json:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
    &quot;compilerOptions&quot;: {
        &quot;module&quot;: &quot;es2015&quot;,
        &quot;allowJs&quot;: true,
        &quot;target&quot;: &quot;es2015&quot;,
        &quot;jsx&quot;: &quot;preserve&quot;
    }
}"><pre class="notranslate">{
    <span class="pl-ent">"compilerOptions"</span>: {
        <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>es2015<span class="pl-pds">"</span></span>,
        <span class="pl-ent">"allowJs"</span>: <span class="pl-c1">true</span>,
        <span class="pl-ent">"target"</span>: <span class="pl-s"><span class="pl-pds">"</span>es2015<span class="pl-pds">"</span></span>,
        <span class="pl-ent">"jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>preserve<span class="pl-pds">"</span></span>
    }
}</pre></div>
<p dir="auto">With the change to allow JSX syntax in JavaScript files by default ( <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="128012346" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/6562" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/TypeScript/pull/6562/hovercard" href="https://github.com/microsoft/TypeScript/pull/6562">#6562</a> ), the compiler now emits all JavaScript files with a .jsx extension if the compiler option "jsx" is set to "preserve".</p>