<p dir="auto">I'm using TS 1.6.3 and JSPM. I <code class="notranslate">jspm install</code>-ed moment and then import it like so<br>
import * as moment from 'moment'</p>
<p dir="auto">This compiles to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="....
function(moment_1) {
    moment = moment_1;
}
...."><pre class="notranslate"><code class="notranslate">....
function(moment_1) {
    moment = moment_1;
}
....
</code></pre></div>
<p dir="auto">Using Babel this compiles to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="....
function(_moment) {
    moment = _moment['default'];
}
...."><pre class="notranslate"><code class="notranslate">....
function(_moment) {
    moment = _moment['default'];
}
....
</code></pre></div>
<p dir="auto">At runtime the <code class="notranslate">moment_1</code> or <code class="notranslate">_moment</code> variable refers to an object which actually has a <code class="notranslate">default</code> property which is the MomentJS's factory. So, to me, it looks like Babel is correct.</p>
<p dir="auto">As a result of the way the TS compiler compiles it, it's not possible, in TypeScript code, to simply do <code class="notranslate">var x = moment()</code> because at runtime that will fail as <code class="notranslate">moment</code> will be an object, not a function. You also can't do <code class="notranslate">moment.default()</code> because in the <code class="notranslate">d.ts</code> file there is no <code class="notranslate">default</code> function. At the moment I'm doing a hack <code class="notranslate">(moment as any).default()</code>.</p>
<p dir="auto">I would appreciate it if someone could shed some light on whether I'm doing something wrong or it's a bug.</p>
<p dir="auto">Thanks!</p>
<p dir="auto">I was recently running into some trouble with getting SystemJS to load jQuery using the ES6-style syntax.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as $ from 'jquery';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The above code worked fine with RequireJS and AMD format, and when using SystemJS as the loader when my code was emitted by TypeScript in AMD format.</p>
<p dir="auto">However I noticed odd behavior when emitting this code using the system format and using SystemJS.  I was getting all of the static functions of <code class="notranslate">$</code>, but <code class="notranslate">$</code> <em>itself</em> was an inert object (not a function).  So at runtime, <code class="notranslate">$.isArray([]);</code> would work, but <code class="notranslate">$('#myDiv')</code> would throw "$ is not a function".</p>
<p dir="auto">Here's my original issue on the SystemJS repo: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="111268201" data-permission-text="Title is private" data-url="https://github.com/systemjs/systemjs/issues/844" data-hovercard-type="issue" data-hovercard-url="/systemjs/systemjs/issues/844/hovercard" href="https://github.com/systemjs/systemjs/issues/844">systemjs/systemjs#844</a></p>
<p dir="auto">I kept digging around in the SystemJS documentation and eventually noticed that it referenced using a <em>default</em> ES6 import with jQuery:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import $ from 'jquery';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">$</span> <span class="pl-k">from</span> <span class="pl-s">'jquery'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Sure enough when I tried this, it worked, even though jQuery itself <strong>does not</strong> export a property <code class="notranslate">default</code>.</p>
<p dir="auto">After more research, I found this on the SystemJS site:</p>
<p dir="auto"><a href="https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#inter-format-dependencies">https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#inter-format-dependencies</a></p>
<blockquote>
<p dir="auto">When loading CommonJS, AMD or Global modules from within ES6, the full module is available at the  default  export which can be loaded with the default import syntax.</p>
</blockquote>
<p dir="auto">So when using SystemJS, the "is a" is made available through a <em>virtual</em> default export.</p>
<p dir="auto">However, this is a problem since there's not currently a way to model this in TypeScript without breaking existing code using <code class="notranslate">import $ = require('jquery')</code> syntax.</p>
<p dir="auto">Current jQuery definition on Definitely Typed:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="declare module &quot;jquery&quot; {
  export = $;
}"><pre class="notranslate"><span class="pl-k">declare</span> module <span class="pl-s">"jquery"</span> <span class="pl-kos">{</span>
  <span class="pl-k">export</span> <span class="pl-c1">=</span> <span class="pl-s1">$</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Proposal</h2>
<p dir="auto">In light of the documented behavior of SystemJS, I'd like to propose a change to TypeScript to allow ES6-style default import syntax to work with an ambient external module declaration that uses <code class="notranslate">export =</code> syntax, as long as the module format is "system".</p>
<p dir="auto">With this change, this code would compile cleanly if TypeScript is set to "system", but would still error using "amd", "commonjs" or "umd" with "Module 'my-module' has no default export":</p>
<p dir="auto"><strong>my-module.d.ts</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="declare module &quot;my-module&quot; {
  var doStuff : () =&gt; void;
  export = doStuff;
}"><pre class="notranslate"><span class="pl-k">declare</span> module <span class="pl-s">"my-module"</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">doStuff</span> : <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">;</span>
  <span class="pl-k">export</span> <span class="pl-c1">=</span> <span class="pl-s1">doStuff</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>test.ts</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import ds from &quot;my-module&quot;;
ds();"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">ds</span> <span class="pl-k">from</span> <span class="pl-s">"my-module"</span><span class="pl-kos">;</span>
<span class="pl-en">ds</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Related:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="101318135" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/4337" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/4337/hovercard" href="https://github.com/microsoft/TypeScript/issues/4337">#4337</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="67722721" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/2719" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/2719/hovercard" href="https://github.com/microsoft/TypeScript/issues/2719">#2719</a><br>
CC: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vvakame/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vvakame">@vvakame</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/basarat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/basarat">@basarat</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jbrantly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jbrantly">@jbrantly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/guybedford/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/guybedford">@guybedford</a></p>