<p dir="auto">When a function has multiple optional arguments, callers of the function must use <code class="notranslate">undefined</code> to get the default, optional value.</p>
<h2 dir="auto">Proposal</h2>
<p dir="auto">Add a syntax allowing function arguments to be passed by name. Unless there is a better suggestion, I propose the use of <code class="notranslate">:=</code>. This would be sugar, and rewrite the call site to invoke the function properly. A syntax error would be thrown if the argument name was not a specified parameter.</p>
<p dir="auto"><code class="notranslate">argumentName := value</code></p>
<p dir="auto">Example syntax:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
function func(a, b=2, c=3)
{
// Do work
}

// Proposed syntax
func(c:=4, a:=1);
// Results in the following javascript being output:
func(1, void 0, 4);

// Syntax error - Multiple specifications for argument 'a'
func(1, a:=1);

// Syntax error - 'd' is not a function parameter
func(1, d:=4);

// Valid syntax
func(a:=1);
// Rewrites to
func(1);"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-c1">=</span><span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-s1">c</span><span class="pl-c1">=</span><span class="pl-c1">3</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
<span class="pl-c">// Do work</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Proposed syntax</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-s1">c</span>:<span class="pl-c1">=</span><span class="pl-c1">4</span><span class="pl-kos">,</span> <span class="pl-s1">a</span>:<span class="pl-c1">=</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// Results in the following javascript being output:</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Syntax error - Multiple specifications for argument 'a'</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-s1">a</span>:<span class="pl-c1">=</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Syntax error - 'd' is not a function parameter</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-s1">d</span>:<span class="pl-c1">=</span><span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Valid syntax</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-s1">a</span>:<span class="pl-c1">=</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// Rewrites to</span>
<span class="pl-en">func</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">C# allows adding names of arguments in a function call:</p>
<div class="highlight highlight-source-cs notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="CalculateBMI(weight: 123, height: 64);"><pre class="notranslate">CalculateBMI<span class="pl-kos">(</span>weight<span class="pl-c1">:</span> <span class="pl-c1">123</span><span class="pl-kos">,</span> height<span class="pl-c1">:</span> <span class="pl-c1">64</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">See <a href="http://msdn.microsoft.com/en-us/library/dd264739.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/dd264739.aspx</a></p>
<p dir="auto">In TypeScript's source this is also done, but with comments:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="emitLinesStartingAt(nodes, /*startIndex*/ 0);"><pre class="notranslate"><span class="pl-en">emitLinesStartingAt</span><span class="pl-kos">(</span><span class="pl-s1">nodes</span><span class="pl-kos">,</span> <span class="pl-c">/*startIndex*/</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Can we have named arguments in TypeScript like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="emitLinesStartingAt(nodes, startIndex: 0);"><pre class="notranslate"><code class="notranslate">emitLinesStartingAt(nodes, startIndex: 0);
</code></pre></div>
<p dir="auto">This can add some compile time checking, for instance when you type <code class="notranslate">count: 0</code> you will get an error.</p>
<p dir="auto">I think we should add a restriction that the order of the arguments cannot be changed. Example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function foo(first: number, second: number) {}
var z = 3;
foo(second: z++, first: z);"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">first</span>: <span class="pl-smi">number</span><span class="pl-kos">,</span> <span class="pl-s1">second</span>: <span class="pl-smi">number</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-k">var</span> <span class="pl-s1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">3</span><span class="pl-kos">;</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">second</span>: <span class="pl-s1">z</span><span class="pl-c1">++</span><span class="pl-kos">,</span> <span class="pl-s1">first</span>: <span class="pl-s1">z</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">An error should be thrown on the last line, because changing the order of the arguments (to <code class="notranslate">foo(z, z++)</code>) in the generated javascript would cause unexpected behavior.</p>
<p dir="auto">Also this can be useful for functions with lots of optional arguments:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function foo(a?, b?, c?, d?, e?) {}
foo(e: 4);
foo(d: 8, 5); // e will be 5"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</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-kos">,</span> <span class="pl-s1">d</span>?<span class="pl-kos">,</span> <span class="pl-s1">e</span>?<span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">e</span>: <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">d</span>: <span class="pl-c1">8</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// e will be 5</span></pre></div>
<p dir="auto">Generates</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function foo(a, b, c, d, e) {}
foo(void 0, void 0, void 0, void 0, 4);
foo(void 0, void 0, void 0, 8, 5);"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</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-kos">,</span> <span class="pl-s1">d</span><span class="pl-kos">,</span> <span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">8</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>