<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">1.8.2</p>
<p dir="auto"><strong>Background</strong>:</p>
<p dir="auto">I have been working on trying to get <a href="https://github.com/eslint/typescript-eslint-parser">https://github.com/eslint/typescript-eslint-parser</a>, a TypeScript parser plugin for ESLint, off the ground, and the job this weekend has been to begin adding JSX support.</p>
<p dir="auto">ESLint uses espree and so the aim of the project is to convert the output of the tsc to an AST which espree expects. We already have a solid suite of JSX tests to develop against (taken from the espree project itself), but I have come up against a tsc error in one of them so far.</p>
<p dir="auto">My issue is that it seems currently the tsc does not accept this "embedded-tags" JSX syntax:</p>
<p dir="auto"><strong>Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;LeftRight left=&lt;a /&gt; right=&lt;b&gt;monkeys /&gt; gorillas&lt;/b&gt; /&gt;;
"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">LeftRight</span> <span class="pl-s1">left</span><span class="pl-c1">=</span><span class="pl-c1">&lt;</span><span class="pl-s1">a</span> <span class="pl-pds"><span class="pl-c1">/</span>&gt; right=&lt;b&gt;monkeys <span class="pl-c1">/</span></span><span class="pl-c1">&gt;</span> <span class="pl-s1">gorillas</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>b&gt; <span class="pl-c1">/</span></span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior:</strong><br>
Please note the AST produced by espree (see in particular the <code class="notranslate">tokens</code> array): <a href="http://astexplorer.net/#/9WAjizSvbC" rel="nofollow">http://astexplorer.net/#/9WAjizSvbC</a></p>
<p dir="auto"><strong>Actual behavior:</strong><br>
...compared to the one produced by the tsc (note the issues found in <code class="notranslate">parseDiagnostics</code>):<br>
<a href="http://astexplorer.net/#/YehKzLJYMW" rel="nofollow">http://astexplorer.net/#/YehKzLJYMW</a></p>
<p dir="auto">Since it's very unlikely that the extension methods will ever be implemented <a href="https://github.com/Microsoft/TypeScript/issues/9#issuecomment-74302592" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/9/hovercard">in a call-site-rewrite manner</a>, please consider adding infix operators to enable writing in functional style similarly to what can be done in Haskell:</p>
<p dir="auto">Monoids</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function '+'&lt;a&gt;(left: a[], right: a[]) : a[] {
   return left.concat(right);
}

[1, 2, 3] '+' [4, 5]; // [1, 2, 3, 4, 5]"><pre class="notranslate"><span class="pl-k">function</span> '<span class="pl-c1">+</span><span class="pl-s">'&lt;a&gt;(left: a[], right: a[]) : a[] {</span>
<span class="pl-s">   return left.concat(right);</span>
<span class="pl-s">}</span>
<span class="pl-s"></span>
<span class="pl-s">[1, 2, 3] '</span><span class="pl-c1">+</span>' [4, 5]; // [1, 2, 3, 4, 5]</pre></div>
<p dir="auto">Monads</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function '&gt;&gt;='&lt;a, b&gt;(promise: Promise&lt;a&gt;, bind: (value: a) =&gt; Promise&lt;b&gt;) : Promise&lt;b&gt; {
   return promise.then(bind);
}
$.get('/get') '&gt;&gt;=' x =&gt; $.post('/save', x + 1)"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-s">'&gt;&gt;='</span><span class="pl-c1">&lt;</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">promise</span>: <span class="pl-smi">Promise</span><span class="pl-kos">&lt;</span><span class="pl-smi">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">bind</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">a</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">Promise</span><span class="pl-kos">&lt;</span><span class="pl-smi">b</span><span class="pl-kos">&gt;</span><span class="pl-kos">)</span> : <span class="pl-smi">Promise</span><span class="pl-kos">&lt;</span><span class="pl-smi">b</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-s1">promise</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">bind</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">'/get'</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-s">'&gt;&gt;='</span><span class="pl-kos"></span> <span class="pl-s1">x</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-en">post</span><span class="pl-kos">(</span><span class="pl-s">'/save'</span><span class="pl-kos">,</span> <span class="pl-s1">x</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Functors</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function '.'&lt;a, b, c&gt;(inner: (value: a) =&gt; b, outer: (value: b) =&gt; c) : (value: a) =&gt; c {
   return function(value: a) : c {
      return outer(inner(value))
   }
}

function f(x: X) : Y { }
function g(y: Y) : Z { }
(f '.' g)(x); // z
"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-s">'.'</span><span class="pl-c1">&lt;</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-kos">,</span> <span class="pl-s1">c</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">inner</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">a</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">b</span><span class="pl-kos">,</span> <span class="pl-s1">outer</span>: <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">b</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">c</span><span class="pl-kos">)</span> : <span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">a</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">c</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">a</span><span class="pl-kos">)</span> : <span class="pl-smi">c</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-en">outer</span><span class="pl-kos">(</span><span class="pl-en">inner</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
   <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">f</span><span class="pl-kos">(</span><span class="pl-s1">x</span>: <span class="pl-smi">X</span><span class="pl-kos">)</span> : <span class="pl-smi">Y</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">g</span><span class="pl-kos">(</span><span class="pl-s1">y</span>: <span class="pl-smi">Y</span><span class="pl-kos">)</span> : <span class="pl-smi">Z</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span>
<span class="pl-kos">(</span><span class="pl-s1">f</span> <span class="pl-s">'.'</span> <span class="pl-s1">g</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// z</span></pre></div>