{"componentChunkName":"component---src-templates-handbook-tsx","path":"/docs/handbook/release-notes/typescript-1-7.html","result":{"data":{"markdownRemark":{"id":"3a0325bc-c670-56b4-bf0a-45016dbae82c","excerpt":"async/await support in ES6 targets (Node v4+) TypeScript now supports asynchronous functions for engines that have native support for ES6 generators, e.g. Node…","html":"<h2 id=\"asyncawait-support-in-es6-targets-node-v4\"><a href=\"#asyncawait-support-in-es6-targets-node-v4\" aria-label=\"asyncawait support in es6 targets node v4 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>async</code>/<code>await</code> support in ES6 targets (Node v4+)</h2>\n<p>TypeScript now supports asynchronous functions for engines that have native support for ES6 generators, e.g. Node v4 and above.\nAsynchronous functions are prefixed with the <code>async</code> keyword;\n<code>await</code> suspends the execution until an asynchronous function return promise is fulfilled and unwraps the value from the <code>Promise</code> returned.</p>\n<h5 id=\"example\"><a href=\"#example\" aria-label=\"example permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Example</h5>\n<p>In the following example, each input element will be printed out one at a time with a 400ms delay:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #A31515\">\"use strict\"</span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #008000\">// printDelayed is a 'Promise&lt;void&gt;'</span>\n<span style=\"color: #0000FF\">async</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> printDelayed(elements: string[]) {</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">for</span><span style=\"color: #000000\"> (</span><span style=\"color: #0000FF\">const</span><span style=\"color: #000000\"> element </span><span style=\"color: #0000FF\">of</span><span style=\"color: #000000\"> elements) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">await</span><span style=\"color: #000000\"> delay(</span><span style=\"color: #09835A\">400</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #000000\">        console.log(element);</span>\n<span style=\"color: #000000\">    }</span>\n<span style=\"color: #000000\">}</span>\n\n<span style=\"color: #0000FF\">async</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> delay(milliseconds: number) {</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">new</span><span style=\"color: #000000\"> Promise&lt;void&gt;(resolve </span><span style=\"color: #0000FF\">=&gt;</span><span style=\"color: #000000\"> {</span>\n<span style=\"color: #000000\">        setTimeout(resolve, milliseconds);</span>\n<span style=\"color: #000000\">    });</span>\n<span style=\"color: #000000\">}</span>\n\n<span style=\"color: #000000\">printDelayed([</span><span style=\"color: #A31515\">\"Hello\"</span><span style=\"color: #000000\">, </span><span style=\"color: #A31515\">\"beautiful\"</span><span style=\"color: #000000\">, </span><span style=\"color: #A31515\">\"asynchronous\"</span><span style=\"color: #000000\">, </span><span style=\"color: #A31515\">\"world\"</span><span style=\"color: #000000\">]).then(() </span><span style=\"color: #0000FF\">=&gt;</span><span style=\"color: #000000\"> {</span>\n<span style=\"color: #000000\">    console.log();</span>\n<span style=\"color: #000000\">    console.log(</span><span style=\"color: #A31515\">\"Printed every element!\"</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #000000\">});</span></code></div></pre>\n<p>For more information see <a href=\"http://blogs.msdn.com/b/typescript/archive/2015/11/03/what-about-async-await.aspx\">Async Functions</a> blog post.</p>\n<h2 id=\"support-for---target-es6-with---module\"><a href=\"#support-for---target-es6-with---module\" aria-label=\"support for   target es6 with   module permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Support for <code>--target ES6</code> with <code>--module</code></h2>\n<p>TypeScript 1.7 adds <code>ES6</code> to the list of options available for the <code>--module</code> flag and allows you to specify the module output when targeting <code>ES6</code>.\nThis provides more flexibility to target exactly the features you want in specific runtimes.</p>\n<h5 id=\"example-1\"><a href=\"#example-1\" aria-label=\"example 1 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Example</h5>\n<pre class=\"shiki\"><div class=\"language-id\">json</div><div class='code-container'><code><span style=\"color: #000000\">{</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0451A5\">\"compilerOptions\"</span><span style=\"color: #000000\">: {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0451A5\">\"module\"</span><span style=\"color: #000000\">: </span><span style=\"color: #A31515\">\"amd\"</span><span style=\"color: #000000\">,</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0451A5\">\"target\"</span><span style=\"color: #000000\">: </span><span style=\"color: #A31515\">\"es6\"</span>\n<span style=\"color: #000000\">    }</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<h2 id=\"this-typing\"><a href=\"#this-typing\" aria-label=\"this typing permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code>-typing</h2>\n<p>It is a common pattern to return the current object (i.e. <code>this</code>) from a method to create <a href=\"https://en.wikipedia.org/wiki/Fluent_interface\">fluent-style APIs</a>.\nFor instance, consider the following <code>BasicCalculator</code> module:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">export</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">default</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">class</span><span style=\"color: #000000\"> BasicCalculator {</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">constructor</span><span style=\"color: #000000\">(</span><span style=\"color: #0000FF\">protected</span><span style=\"color: #000000\"> value: number = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">) { }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> currentValue(): number {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value;</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> add(operand: number) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value += operand;</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> subtract(operand: number) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value -= operand;</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> multiply(operand: number) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value *= operand;</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> divide(operand: number) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value /= operand;</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>A user could express <code>2 * 5 + 1</code> as</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">import</span><span style=\"color: #000000\"> calc </span><span style=\"color: #0000FF\">from</span><span style=\"color: #000000\"> </span><span style=\"color: #A31515\">\"./BasicCalculator\"</span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #0000FF\">let</span><span style=\"color: #000000\"> v = </span><span style=\"color: #0000FF\">new</span><span style=\"color: #000000\"> calc(</span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">)</span>\n<span style=\"color: #000000\">    .multiply(</span><span style=\"color: #09835A\">5</span><span style=\"color: #000000\">)</span>\n<span style=\"color: #000000\">    .add(</span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\">)</span>\n<span style=\"color: #000000\">    .currentValue();</span></code></div></pre>\n<p>This often opens up very elegant ways of writing code; however, there was a problem for classes that wanted to extend from <code>BasicCalculator</code>.\nImagine a user wanted to start writing a <code>ScientificCalculator</code>:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">import</span><span style=\"color: #000000\"> BasicCalculator </span><span style=\"color: #0000FF\">from</span><span style=\"color: #000000\"> </span><span style=\"color: #A31515\">\"./BasicCalculator\"</span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #0000FF\">export</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">default</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">class</span><span style=\"color: #000000\"> ScientificCalculator </span><span style=\"color: #0000FF\">extends</span><span style=\"color: #000000\"> BasicCalculator {</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">constructor</span><span style=\"color: #000000\">(value = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">) {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">super</span><span style=\"color: #000000\">(value);</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> square() {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value = </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value ** </span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">public</span><span style=\"color: #000000\"> sin() {</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value = Math.sin(</span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">.value);</span>\n<span style=\"color: #000000\">        </span><span style=\"color: #0000FF\">return</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">this</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">    }</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>Because TypeScript used to infer the type <code>BasicCalculator</code> for each method in <code>BasicCalculator</code> that returned <code>this</code>, the type system would forget that it had <code>ScientificCalculator</code> whenever using a <code>BasicCalculator</code> method.</p>\n<p>For instance:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">import</span><span style=\"color: #000000\"> calc </span><span style=\"color: #0000FF\">from</span><span style=\"color: #000000\"> </span><span style=\"color: #A31515\">\"./ScientificCalculator\"</span><span style=\"color: #000000\">;</span>\n\n<span style=\"color: #0000FF\">let</span><span style=\"color: #000000\"> v = </span><span style=\"color: #0000FF\">new</span><span style=\"color: #000000\"> calc(</span><span style=\"color: #09835A\">0.5</span><span style=\"color: #000000\">)</span>\n<span style=\"color: #000000\">    .square()</span>\n<span style=\"color: #000000\">    .divide(</span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">)</span>\n<span style=\"color: #000000\">    .sin()    </span><span style=\"color: #008000\">// Error: 'BasicCalculator' has no 'sin' method.</span>\n<span style=\"color: #000000\">    .currentValue();</span></code></div></pre>\n<p>This is no longer the case - TypeScript now infers <code>this</code> to have a special type called <code>this</code> whenever inside an instance method of a class.\nThe <code>this</code> type is written as so, and basically means “the type of the left side of the dot in a method call”.</p>\n<p>The <code>this</code> type is also useful with intersection types in describing libraries (e.g. Ember.js) that use mixin-style patterns to describe inheritance:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">interface</span><span style=\"color: #000000\"> MyType {</span>\n<span style=\"color: #000000\">    extend&lt;T&gt;(other: T): this & T;</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<h2 id=\"es7-exponentiation-operator\"><a href=\"#es7-exponentiation-operator\" aria-label=\"es7 exponentiation operator permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ES7 exponentiation operator</h2>\n<p>TypeScript 1.7 supports upcoming <a href=\"https://github.com/rwaldron/exponentiation-operator\">ES7/ES2016 exponentiation operators</a>: <code>**</code> and <code>**=</code>.\nThe operators will be transformed in the output to ES3/ES5 using <code>Math.pow</code>.</p>\n<h5 id=\"example-2\"><a href=\"#example-2\" aria-label=\"example 2 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Example</h5>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> x = </span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\"> ** </span><span style=\"color: #09835A\">3</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> y = </span><span style=\"color: #09835A\">10</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">y **= </span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> z =  -(</span><span style=\"color: #09835A\">4</span><span style=\"color: #000000\"> ** </span><span style=\"color: #09835A\">3</span><span style=\"color: #000000\">);</span></code></div></pre>\n<p>Will generate the following JavaScript output:</p>\n<pre class=\"shiki\"><div class=\"language-id\">js</div><div class='code-container'><code><span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> x = Math.pow(</span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">, </span><span style=\"color: #09835A\">3</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> y = </span><span style=\"color: #09835A\">10</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">y = Math.pow(y, </span><span style=\"color: #09835A\">2</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #0000FF\">var</span><span style=\"color: #000000\"> z = -(Math.pow(</span><span style=\"color: #09835A\">4</span><span style=\"color: #000000\">, </span><span style=\"color: #09835A\">3</span><span style=\"color: #000000\">));</span></code></div></pre>\n<h2 id=\"improved-checking-for-destructuring-object-literal\"><a href=\"#improved-checking-for-destructuring-object-literal\" aria-label=\"improved checking for destructuring object literal permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Improved checking for destructuring object literal</h2>\n<p>TypeScript 1.7 makes checking of destructuring patterns with an object literal or array literal initializers less rigid and more intuitive.</p>\n<p>When an object literal is contextually typed by the implied type of an object binding pattern:</p>\n<ul>\n<li>Properties with default values in the object binding pattern become optional in the object literal.</li>\n<li>Properties in the object binding pattern that have no match in the object literal are required to have a default value in the object binding pattern and are automatically added to the object literal type.</li>\n<li>Properties in the object literal that have no match in the object binding pattern are an error.</li>\n</ul>\n<p>When an array literal is contextually typed by the implied type of an array binding pattern:</p>\n<ul>\n<li>Elements in the array binding pattern that have no match in the array literal are required to have a default value in the array binding pattern and are automatically added to the array literal type.</li>\n</ul>\n<h5 id=\"example-3\"><a href=\"#example-3\" aria-label=\"example 3 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Example</h5>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #008000\">// Type of f1 is (arg?: { x?: number, y?: number }) =&gt; void</span>\n<span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> f1({ x = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\">, y = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\"> } = {}) { }</span>\n\n<span style=\"color: #008000\">// And can be called as:</span>\n<span style=\"color: #000000\">f1();</span>\n<span style=\"color: #000000\">f1({});</span>\n<span style=\"color: #000000\">f1({ x: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });</span>\n<span style=\"color: #000000\">f1({ y: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });</span>\n<span style=\"color: #000000\">f1({ x: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\">, y: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });</span>\n\n<span style=\"color: #008000\">// Type of f2 is (arg?: (x: number, y?: number) =&gt; void</span>\n<span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> f2({ x, y = </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\"> } = { x: </span><span style=\"color: #09835A\">0</span><span style=\"color: #000000\"> }) { }</span>\n\n<span style=\"color: #000000\">f2();</span>\n<span style=\"color: #000000\">f2({});        </span><span style=\"color: #008000\">// Error, x not optional</span>\n<span style=\"color: #000000\">f2({ x: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });</span>\n<span style=\"color: #000000\">f2({ y: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });  </span><span style=\"color: #008000\">// Error, x not optional</span>\n<span style=\"color: #000000\">f2({ x: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\">, y: </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\"> });</span></code></div></pre>\n<h2 id=\"support-for-decorators-when-targeting-es3\"><a href=\"#support-for-decorators-when-targeting-es3\" aria-label=\"support for decorators when targeting es3 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Support for decorators when targeting ES3</h2>\n<p>Decorators are now allowed when targeting ES3.\nTypeScript 1.7 removes the ES5-specific use of <code>reduceRight</code> from the <code>__decorate</code> helper.\nThe changes also inline calls <code>Object.getOwnPropertyDescriptor</code> and <code>Object.defineProperty</code> in a backwards-compatible fashion that allows for a to clean up the emit for ES5 and later by removing various repetitive calls to the aforementioned <code>Object</code> methods.</p>","headings":[{"value":"async/await support in ES6 targets (Node v4+)","depth":2},{"value":"Example","depth":5},{"value":"Support for --target ES6 with --module","depth":2},{"value":"Example","depth":5},{"value":"this-typing","depth":2},{"value":"ES7 exponentiation operator","depth":2},{"value":"Example","depth":5},{"value":"Improved checking for destructuring object literal","depth":2},{"value":"Example","depth":5},{"value":"Support for decorators when targeting ES3","depth":2}],"frontmatter":{"permalink":"/docs/handbook/release-notes/typescript-1-7.html","title":"TypeScript 1.7"}}},"pageContext":{"slug":"/docs/handbook/release-notes/typescript-1-7.html","isOldHandbook":true}}}