{"componentChunkName":"component---src-templates-handbook-tsx","path":"/docs/handbook/release-notes/typescript-2-3.html","result":{"data":{"allSitePage":{"nodes":[{"path":"/dev-404-page/"},{"path":"/docs/handbook/advanced-types.html"},{"path":"/docs/handbook/basic-types.html"},{"path":"/docs/handbook/classes.html"},{"path":"/docs/handbook/compiler-options-in-msbuild.html"},{"path":"/docs/handbook/compiler-options.html"},{"path":"/docs/handbook/configuring-watch.html"},{"path":"/docs/handbook/declaration-merging.html"},{"path":"/docs/handbook/decorators.html"},{"path":"/docs/handbook/enums.html"},{"path":"/docs/handbook/functions.html"},{"path":"/docs/handbook/generics.html"},{"path":"/docs/handbook/integrating-with-build-tools.html"},{"path":"/docs/handbook/interfaces.html"},{"path":"/docs/handbook/iterators-and-generators.html"},{"path":"/docs/handbook/jsdoc-supported-types.html"},{"path":"/docs/handbook/jsx.html"},{"path":"/docs/handbook/literal-types.html"},{"path":"/docs/handbook/mixins.html"},{"path":"/docs/handbook/module-resolution.html"},{"path":"/docs/handbook/modules.html"},{"path":"/docs/handbook/namespaces-and-modules.html"},{"path":"/docs/handbook/namespaces.html"},{"path":"/docs/handbook/nightly-builds.html"},{"path":"/docs/handbook/project-references.html"},{"path":"/docs/handbook/symbols.html"},{"path":"/docs/handbook/"},{"path":"/docs/handbook/triple-slash-directives.html"},{"path":"/docs/handbook/type-checking-javascript-files.html"},{"path":"/docs/handbook/type-compatibility.html"},{"path":"/docs/handbook/type-inference.html"},{"path":"/docs/handbook/unions-and-intersections.html"},{"path":"/docs/handbook/utility-types.html"},{"path":"/docs/handbook/variable-declarations.html"},{"path":"/docs/handbook/writing-declaration-files.html"},{"path":"/docs/handbook/declaration-files/by-example.html"},{"path":"/docs/handbook/declaration-files/consumption.html"},{"path":"/docs/handbook/declaration-files/deep-dive.html"},{"path":"/docs/handbook/declaration-files/do-s-and-don-ts.html"},{"path":"/docs/handbook/declaration-files/introduction.html"},{"path":"/docs/handbook/declaration-files/library-structures.html"},{"path":"/docs/handbook/declaration-files/publishing.html"},{"path":"/docs/handbook/declaration-files/templates.html"},{"path":"/docs/handbook/release-notes/typescript-1-1.html"},{"path":"/docs/handbook/release-notes/typescript-1-3.html"},{"path":"/docs/handbook/release-notes/typescript-1-4.html"},{"path":"/docs/handbook/release-notes/typescript-1-5.html"},{"path":"/docs/handbook/release-notes/typescript-1-6.html"},{"path":"/docs/handbook/release-notes/typescript-1-7.html"},{"path":"/docs/handbook/release-notes/typescript-1-8.html"},{"path":"/docs/handbook/release-notes/typescript-2-0.html"},{"path":"/docs/handbook/release-notes/typescript-2-2.html"},{"path":"/docs/handbook/release-notes/typescript-2-1.html"},{"path":"/docs/handbook/release-notes/typescript-2-3.html"},{"path":"/docs/handbook/release-notes/typescript-2-4.html"},{"path":"/docs/handbook/release-notes/typescript-2-5.html"},{"path":"/docs/handbook/release-notes/typescript-2-6.html"},{"path":"/docs/handbook/release-notes/typescript-2-7.html"},{"path":"/docs/handbook/release-notes/typescript-2-8.html"},{"path":"/docs/handbook/release-notes/typescript-2-9.html"},{"path":"/docs/handbook/release-notes/typescript-3-0.html"},{"path":"/docs/handbook/release-notes/typescript-3-1.html"},{"path":"/docs/handbook/release-notes/typescript-3-2.html"},{"path":"/docs/handbook/release-notes/typescript-3-3.html"},{"path":"/docs/handbook/release-notes/typescript-3-4.html"},{"path":"/docs/handbook/release-notes/typescript-3-5.html"},{"path":"/docs/handbook/release-notes/typescript-3-6.html"},{"path":"/docs/handbook/release-notes/typescript-3-7.html"},{"path":"/docs/handbook/release-notes/typescript-3-8.html"},{"path":"/docs/handbook/asp-net-core.html"},{"path":"/docs/handbook/angular.html"},{"path":"/docs/handbook/dom-manipulation.html"},{"path":"/docs/handbook/gulp.html"},{"path":"/docs/handbook/migrating-from-javascript.html"},{"path":"/docs/handbook/react-&-webpack.html"},{"path":"/docs/handbook/react.html"},{"path":"/docs/handbook/typescript-in-5-minutes-func.html"},{"path":"/docs/handbook/typescript-in-5-minutes.html"},{"path":"/docs/handbook/typescript-in-5-minutes-oop.html"},{"path":"/docs/handbook/typescript-from-scratch.html"},{"path":"/docs/handbook/typescript-tooling-in-5-minutes.html"},{"path":"/docs/handbook/tsconfig-json.html"},{"path":"/docs/handbook/declaration-files/templates/global-modifying-module-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/global-plugin-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/global-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-class-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-function-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-plugin-d-ts.html"},{"path":"/docs/handbook/declaration-files/templates/module-d-ts.html"},{"path":"/docs/handbook/release-notes/overview.html"},{"path":"/tsconfig"},{"path":"/en/tsconfig"},{"path":"/ja/tsconfig"},{"path":"/vo/tsconfig"},{"path":"/play"},{"path":"/en/play"},{"path":"/es/play"},{"path":"/vo/play"},{"path":"/zh/play"},{"path":"/ja/play"},{"path":"/play/3-7/fixits/big-number-literals.ts"},{"path":"/play/3-7/fixits/const-to-let.ts"},{"path":"/play/3-7/fixits/infer-from-usage-changes.ts"},{"path":"/play/3-7/syntax-and-messaging/flattened-error-reporting.ts"},{"path":"/play/3-7/syntax-and-messaging/nullish-coalescing.ts"},{"path":"/play/3-7/syntax-and-messaging/optional-chaining.ts"},{"path":"/play/3-7/types-and-code-flow/assertion-functions.ts"},{"path":"/play/3-7/types-and-code-flow/recursive-type-references.ts"},{"path":"/play/3-7/types-and-code-flow/uncalled-function-checks.ts"},{"path":"/play/3-8/breaking-changes/checking-unions-with-index-signatures.ts"},{"path":"/play/3-8/jsdoc-improvements/accessibility-modifiers.js"},{"path":"/play/3-8/syntax-and-messaging/export-modules-from.ts"},{"path":"/play/3-8/syntax-and-messaging/private-class-fields.ts"},{"path":"/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/play/javascript/external-apis/typescript-with-node.js"},{"path":"/play/javascript/external-apis/typescript-with-web.js"},{"path":"/play/javascript/external-apis/typescript-with-webgl.js"},{"path":"/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/play/javascript/functions-with-javascript/typing-functions.ts"},{"path":"/play/javascript/helping-with-javascript/errors.ts"},{"path":"/play/javascript/helping-with-javascript/quick-fixes.ts"},{"path":"/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/play/javascript/javascript-essentials/functions.ts"},{"path":"/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/play/javascript/modern-javascript/async-await.ts"},{"path":"/play/javascript/modern-javascript/immutability.ts"},{"path":"/play/javascript/modern-javascript/import-export.ts"},{"path":"/play/javascript/modern-javascript/jsdoc-support.js"},{"path":"/play/javascript/working-with-classes/classes-101.ts"},{"path":"/play/javascript/working-with-classes/generic-classes.ts"},{"path":"/play/javascript/working-with-classes/mixins.ts"},{"path":"/play/javascript/working-with-classes/this.ts"},{"path":"/play/playground/config/javascript-playgrounds.js"},{"path":"/play/playground/config/new-compiler-defaults.ts"},{"path":"/play/playground/language/automatic-type-acquisition.ts"},{"path":"/play/playground/language/fixits.ts"},{"path":"/play/playground/tooling/mobile-support.ts"},{"path":"/play/playground/tooling/sharable-urls.ts"},{"path":"/play/playground/tooling/typescript-versions.ts"},{"path":"/play/typescript/language/soundness.ts"},{"path":"/play/typescript/language/structural-typing.ts"},{"path":"/play/typescript/language/type-guards.ts"},{"path":"/play/typescript/language/type-widening-and-narrowing.ts"},{"path":"/play/typescript/language-extensions/enums.ts"},{"path":"/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/play/typescript/meta-types/conditional-types.ts"},{"path":"/play/typescript/meta-types/discriminate-types.ts"},{"path":"/play/typescript/meta-types/indexed-types.ts"},{"path":"/play/typescript/meta-types/mapped-types.ts"},{"path":"/play/typescript/primitives/any.ts"},{"path":"/play/typescript/primitives/literals.ts"},{"path":"/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/play/typescript/primitives/unknown-and-never.ts"},{"path":"/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/play/typescript/type-primitives/nullable-types.ts"},{"path":"/play/typescript/type-primitives/tuples.ts"},{"path":"/es/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/es/play/javascript/external-apis/typescript-with-node.js"},{"path":"/es/play/javascript/external-apis/typescript-with-web.js"},{"path":"/es/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/es/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/es/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/es/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/es/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/es/play/typescript/type-primitives/nullable-types.ts"},{"path":"/es/play/typescript/type-primitives/tuples.ts"},{"path":"/ja/play/typescript/language-extensions/enums.ts"},{"path":"/ja/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/ja/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/ja/play/typescript/primitives/any.ts"},{"path":"/ja/play/typescript/primitives/literals.ts"},{"path":"/ja/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/ja/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/vo/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/vo/play/javascript/javascript-essentials/functions.ts"},{"path":"/vo/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/vo/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/zh/play/javascript/external-apis/typescript-with-deno.ts"},{"path":"/zh/play/javascript/external-apis/typescript-with-node.js"},{"path":"/zh/play/javascript/external-apis/typescript-with-web.js"},{"path":"/zh/play/javascript/external-apis/typescript-with-webgl.js"},{"path":"/zh/play/javascript/functions-with-javascript/function-chaining.ts"},{"path":"/zh/play/javascript/functions-with-javascript/generic-functions.ts"},{"path":"/zh/play/javascript/functions-with-javascript/typing-functions.ts"},{"path":"/zh/play/javascript/helping-with-javascript/errors.ts"},{"path":"/zh/play/javascript/helping-with-javascript/quick-fixes.ts"},{"path":"/zh/play/javascript/javascript-essentials/code-flow.ts"},{"path":"/zh/play/javascript/javascript-essentials/functions.ts"},{"path":"/zh/play/javascript/javascript-essentials/hello-world.ts"},{"path":"/zh/play/javascript/modern-javascript/import-export.ts"},{"path":"/zh/play/javascript/modern-javascript/jsdoc-support.js"},{"path":"/zh/play/javascript/working-with-classes/classes-101.ts"},{"path":"/zh/play/javascript/working-with-classes/generic-classes.ts"},{"path":"/zh/play/javascript/working-with-classes/mixins.ts"},{"path":"/zh/play/javascript/working-with-classes/this.ts"},{"path":"/zh/play/playground/config/javascript-playgrounds.js"},{"path":"/zh/play/playground/config/new-compiler-defaults.ts"},{"path":"/zh/play/playground/language/automatic-type-acquisition.ts"},{"path":"/zh/play/playground/language/fixits.ts"},{"path":"/zh/play/playground/tooling/mobile-support.ts"},{"path":"/zh/play/playground/tooling/sharable-urls.ts"},{"path":"/zh/play/playground/tooling/typescript-versions.ts"},{"path":"/zh/play/typescript/language/soundness.ts"},{"path":"/zh/play/typescript/language/structural-typing.ts"},{"path":"/zh/play/typescript/language/type-guards.ts"},{"path":"/zh/play/typescript/language/type-widening-and-narrowing.ts"},{"path":"/zh/play/typescript/language-extensions/enums.ts"},{"path":"/zh/play/typescript/language-extensions/nominal-typing.ts"},{"path":"/zh/play/typescript/language-extensions/types-vs-interfaces.ts"},{"path":"/zh/play/typescript/meta-types/conditional-types.ts"},{"path":"/zh/play/typescript/meta-types/discriminate-types.ts"},{"path":"/zh/play/typescript/meta-types/indexed-types.ts"},{"path":"/zh/play/typescript/meta-types/mapped-types.ts"},{"path":"/zh/play/typescript/primitives/any.ts"},{"path":"/zh/play/typescript/primitives/literals.ts"},{"path":"/zh/play/typescript/primitives/union-and-intersection-types.ts"},{"path":"/zh/play/typescript/primitives/unknown-and-never.ts"},{"path":"/zh/play/typescript/type-primitives/built-in-utility-types.ts"},{"path":"/zh/play/typescript/type-primitives/nullable-types.ts"},{"path":"/zh/play/typescript/type-primitives/tuples.ts"},{"path":"/zh/play/javascript/modern-javascript/immutability.ts"},{"path":"/zh/play/javascript/modern-javascript/async-await.ts"},{"path":"/zh/play/javascript/javascript-essentials/objects-and-arrays.ts"},{"path":"/community"},{"path":"/es/community"},{"path":"/ja/community"},{"path":"/vo/community"},{"path":"/zh/community"},{"path":"/download"},{"path":"/es/download"},{"path":"/ja/download"},{"path":"/vo/download"},{"path":"/zh/download"},{"path":"/empty"},{"path":"/es/empty"},{"path":"/ja/empty"},{"path":"/vo/empty"},{"path":"/zh/empty"},{"path":"/"},{"path":"/es/"},{"path":"/ja/"},{"path":"/vo/"},{"path":"/zh/"},{"path":"/tools"},{"path":"/es/tools"},{"path":"/ja/tools"},{"path":"/vo/tools"},{"path":"/zh/tools"},{"path":"/why-create-typescript"},{"path":"/es/why-create-typescript"},{"path":"/ja/why-create-typescript"},{"path":"/vo/why-create-typescript"},{"path":"/zh/why-create-typescript"},{"path":"/docs/home"},{"path":"/es/docs/home"},{"path":"/ja/docs/home"},{"path":"/vo/docs/home"},{"path":"/zh/docs/home"},{"path":"/dev/playground-plugins/"},{"path":"/dev/sandbox/"},{"path":"/dev/twoslash/"},{"path":"/dev/typescript-vfs/"}]},"markdownRemark":{"id":"bf50b2eb-eb39-5710-8696-0fe8a504f04e","excerpt":"Generators and Iteration for ES5/ES3 First some ES2016 terminology: Iterators ES2015 introduced Iterator, which is an object that exposes three methods, next…","html":"<h2 id=\"generators-and-iteration-for-es5es3\" style=\"position:relative;\"><a href=\"#generators-and-iteration-for-es5es3\" aria-label=\"generators and iteration for es5es3 permalink\" class=\"anchor before\"><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>Generators and Iteration for ES5/ES3</h2>\n<p><em>First some ES2016 terminology:</em></p>\n<h5 id=\"iterators\" style=\"position:relative;\"><a href=\"#iterators\" aria-label=\"iterators permalink\" class=\"anchor before\"><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>Iterators</h5>\n<p><a href=\"http://www.ecma-international.org/ecma-262/6.0/#sec-iteration\">ES2015 introduced <code>Iterator</code></a>, which is an object that exposes three methods, <code>next</code>, <code>return</code>, and <code>throw</code>, as per the following interface:</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\"> Iterator&lt;T&gt; {</span>\n<span style=\"color: #000000\">  next(value?: any): IteratorResult&lt;T&gt;;</span>\n<span style=\"color: #000000\">  return?(value?: any): IteratorResult&lt;T&gt;;</span>\n<span style=\"color: #000000\">  throw?(e?: any): IteratorResult&lt;T&gt;;</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>This kind of iterator is useful for iterating over synchronously available values, such as the elements of an Array or the keys of a Map.\nAn object that supports iteration is said to be “iterable” if it has a <code>Symbol.iterator</code> method that returns an <code>Iterator</code> object.</p>\n<p>The Iterator protocol also defines the target of some of the ES2015 features like <code>for..of</code> and spread operator and the array rest in destructuring assignmnets.</p>\n<h5 id=\"generators\" style=\"position:relative;\"><a href=\"#generators\" aria-label=\"generators permalink\" class=\"anchor before\"><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>Generators</h5>\n<p><a href=\"http://www.ecma-international.org/ecma-262/6.0/#sec-generatorfunction-objects\">ES2015 also introduced “Generators”</a>, which are functions that can be used to yield partial computation results via the <code>Iterator</code> interface and the <code>yield</code> keyword.\nGenerators can also internally delegate calls to another iterable through <code>yield *</code>. For example:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">function*</span><span style=\"color: #000000\"> f() {</span>\n<span style=\"color: #000000\">  </span><span style=\"color: #0000FF\">yield</span><span style=\"color: #000000\"> </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">  </span><span style=\"color: #0000FF\">yield*</span><span style=\"color: #000000\"> [</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: #000000\">}</span></code></div></pre>\n<h5 id=\"new---downleveliteration\" style=\"position:relative;\"><a href=\"#new---downleveliteration\" aria-label=\"new   downleveliteration permalink\" class=\"anchor before\"><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>New <code>--downlevelIteration</code></h5>\n<p>Previously generators were only supported if the target is ES6/ES2015 or later.\nMoreover, constructs that operate on the Iterator protocol, e.g. <code>for..of</code> were only supported if they operate on arrays for targets below ES6/ES2015.</p>\n<p>TypeScript 2.3 adds full support for generators and the Iterator protocol for ES3 and ES5 targets with <code>--downlevelIteration</code> flag.</p>\n<p>With <code>--downlevelIteration</code>, the compiler uses new type check and emit behavior that attempts to call a <code>[Symbol.iterator]()</code> method on the iterated object if it is found, and creates a synthetic array iterator over the object if it is not.</p>\n<blockquote>\n<p>Please note that this requires a native <code>Symbol.iterator</code> or <code>Symbol.iterator</code> shim at runtime for any non-array values.</p>\n</blockquote>\n<p><code>for..of</code> statements,  Array Destructuring, and Spread elements in Array, Call, and New expressions support <code>Symbol.iterator</code> in ES5/E3 if available when using <code>--downlevelIteration</code>, but can be used on an Array even if it does not define <code>Symbol.iterator</code> at run time or design time.</p>\n<h2 id=\"async-iteration\" style=\"position:relative;\"><a href=\"#async-iteration\" aria-label=\"async iteration permalink\" class=\"anchor before\"><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>Async Iteration</h2>\n<p>TypeScript 2.3 adds support for the async iterators and generators as described by the current <a href=\"https://github.com/tc39/proposal-async-iteration\">TC39 proposal</a>.</p>\n<h5 id=\"async-iterators\" style=\"position:relative;\"><a href=\"#async-iterators\" aria-label=\"async iterators permalink\" class=\"anchor before\"><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>Async iterators</h5>\n<p>The Async Iteration introduces an <code>AsyncIterator</code>, which is similar to <code>Iterator</code>.\nThe difference lies in the fact that the <code>next</code>, <code>return</code>, and <code>throw</code> methods of an <code>AsyncIterator</code> return a <code>Promise</code> for the iteration result, rather than the result itself.\nThis allows the caller to enlist in an asynchronous notification for the time at which the <code>AsyncIterator</code> has advanced to the point of yielding a value.\nAn <code>AsyncIterator</code> has the following shape:</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\"> AsyncIterator&lt;T&gt; {</span>\n<span style=\"color: #000000\">  next(value?: any): Promise&lt;IteratorResult&lt;T&gt;&gt;;</span>\n<span style=\"color: #000000\">  return?(value?: any): Promise&lt;IteratorResult&lt;T&gt;&gt;;</span>\n<span style=\"color: #000000\">  throw?(e?: any): Promise&lt;IteratorResult&lt;T&gt;&gt;;</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>An object that supports async iteration is said to be “iterable” if it has a <code>Symbol.asyncIterator</code> method that returns an <code>AsyncIterator</code> object.</p>\n<h5 id=\"async-generators\" style=\"position:relative;\"><a href=\"#async-generators\" aria-label=\"async generators permalink\" class=\"anchor before\"><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>Async Generators</h5>\n<p>The <a href=\"https://github.com/tc39/proposal-async-iteration\">Async Iteration proposal</a> introduces “Async Generators”, which are async functions that also can be used to yield partial computation results.\nAsync Generators can also delegate calls via <code>yield*</code> to either an iterable or async iterable:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">async</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function*</span><span style=\"color: #000000\"> g() {</span>\n<span style=\"color: #000000\">  </span><span style=\"color: #0000FF\">yield</span><span style=\"color: #000000\"> </span><span style=\"color: #09835A\">1</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">  </span><span style=\"color: #0000FF\">await</span><span style=\"color: #000000\"> sleep(</span><span style=\"color: #09835A\">100</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #000000\">  </span><span style=\"color: #0000FF\">yield*</span><span style=\"color: #000000\"> [</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: #000000\">  </span><span style=\"color: #0000FF\">yield*</span><span style=\"color: #000000\"> (</span><span style=\"color: #0000FF\">async</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">*</span><span style=\"color: #000000\">() {</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">await</span><span style=\"color: #000000\"> sleep(</span><span style=\"color: #09835A\">100</span><span style=\"color: #000000\">);</span>\n<span style=\"color: #000000\">    </span><span style=\"color: #0000FF\">yield</span><span style=\"color: #000000\"> </span><span style=\"color: #09835A\">4</span><span style=\"color: #000000\">;</span>\n<span style=\"color: #000000\">  })();</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>As with Generators, Async Generators can only be function declarations, function expressions, or methods of classes or object literals.\nArrow functions cannot be Async Generators. Async Generators require a valid, global <code>Promise</code> implementation (either native or an ES2015-compatible polyfill), in addition to a valid <code>Symbol.asyncIterator</code> reference (either a native symbol or a shim).</p>\n<h5 id=\"the-for-await-of-statement\" style=\"position:relative;\"><a href=\"#the-for-await-of-statement\" aria-label=\"the for await of statement permalink\" class=\"anchor before\"><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>The <code>for-await-of</code> Statement</h5>\n<p>Finally, ES2015 introduced the <code>for..of</code> statement as a means of iterating over an iterable.\nSimilarly, the Async Iteration proposal introduces the <code>for..await..of</code> statement to iterate over an async iterable:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">async</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> f() {</span>\n<span style=\"color: #000000\">  for </span><span style=\"color: #0000FF\">await</span><span style=\"color: #000000\"> (const x </span><span style=\"color: #0000FF\">of</span><span style=\"color: #000000\"> g()) {</span>\n<span style=\"color: #000000\">     console.log(x);</span>\n<span style=\"color: #000000\">  }</span>\n<span style=\"color: #000000\">}</span></code></div></pre>\n<p>The <code>for..await..of</code> statement is only legal within an Async Function or Async Generator.</p>\n<h5 id=\"caveats\" style=\"position:relative;\"><a href=\"#caveats\" aria-label=\"caveats permalink\" class=\"anchor before\"><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>Caveats</h5>\n<ul>\n<li>Keep in mind that our support for async iterators relies on support for <code>Symbol.asyncIterator</code> to exist at runtime. You may need to polyfill <code>Symbol.asyncIterator</code>, which for simple purposes can be as simple as: <code>(Symbol as any).asyncIterator = Symbol.asyncIterator || Symbol.for(\"Symbol.asyncIterator\");</code></li>\n<li>You also need to include <code>esnext</code> in your <code>--lib</code> option, to get the <code>AsyncIterator</code> declaration if you do not already have it.</li>\n<li>Finally, if your target is ES5 or ES3, you’ll also need to set the <code>--downlevelIterators</code> flag.</li>\n</ul>\n<h2 id=\"generic-parameter-defaults\" style=\"position:relative;\"><a href=\"#generic-parameter-defaults\" aria-label=\"generic parameter defaults permalink\" class=\"anchor before\"><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>Generic parameter defaults</h2>\n<p>TypeScript 2.3 adds support for declaring defaults for generic type parameters.</p>\n<h5 id=\"example\" style=\"position:relative;\"><a href=\"#example\" aria-label=\"example permalink\" class=\"anchor before\"><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>Consider a function that creates a new <code>HTMLElement</code>, calling it with no arguments generates a <code>Div</code>; you can optionally pass a list of children as well. Previously you would have to define it as:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">declare</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> create(): Container&lt;HTMLDivElement, HTMLDivElement[]&gt;;</span>\n<span style=\"color: #0000FF\">declare</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> create&lt;T </span><span style=\"color: #0000FF\">extends</span><span style=\"color: #000000\"> HTMLElement&gt;(element: T): Container&lt;T, T[]&gt;;</span>\n<span style=\"color: #0000FF\">declare</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> create&lt;T </span><span style=\"color: #0000FF\">extends</span><span style=\"color: #000000\"> HTMLElement, U </span><span style=\"color: #0000FF\">extends</span><span style=\"color: #000000\"> HTMLElement&gt;(element: T, children: U[]): Container&lt;T, U[]&gt;;</span></code></div></pre>\n<p>With generic parameter defaults we can reduce it to:</p>\n<pre class=\"shiki\"><div class=\"language-id\">ts</div><div class='code-container'><code><span style=\"color: #0000FF\">declare</span><span style=\"color: #000000\"> </span><span style=\"color: #0000FF\">function</span><span style=\"color: #000000\"> create&lt;T </span><span style=\"color: #0000FF\">extends</span><span style=\"color: #000000\"> HTMLElement = HTMLDivElement, U = T[]&gt;(element?: T, children?: U): Container&lt;T, U&gt;;</span></code></div></pre>\n<p>A generic parameter default follows the following rules:</p>\n<ul>\n<li>A type parameter is deemed optional if it has a default.</li>\n<li>Required type parameters must not follow optional type parameters.</li>\n<li>Default types for a type parameter must satisfy the constraint for the type parameter, if it exists.</li>\n<li>When specifying type arguments, you are only required to specify type arguments for the required type parameters. Unspecified type parameters will resolve to their default types.</li>\n<li>If a default type is specified and inference cannot choose a candidate, the default type is inferred.</li>\n<li>A class or interface declaration that merges with an existing class or interface declaration may introduce a default for an existing type parameter.</li>\n<li>A class or interface declaration that merges with an existing class or interface declaration may introduce a new type parameter as long as it specifies a default.</li>\n</ul>\n<h2 id=\"new---strict-master-option\" style=\"position:relative;\"><a href=\"#new---strict-master-option\" aria-label=\"new   strict master option permalink\" class=\"anchor before\"><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>New <code>--strict</code> master option</h2>\n<p>New checks added to TypeScript are often off by default to avoid breaking existing projects.\nWhile avoiding breakage is a good thing, this strategy has the drawback of making it increasingly complex to choose the highest level of type safety, and doing so requires explicit opt-in action on every TypeScript release.\nWith the <code>--strict</code> option it becomes possible to choose maximum type safety with the understanding that additional errors might be reported by newer versions of the compiler as improved type checking features are added.</p>\n<p>The new <code>--strict</code> compiler option represents the recommended setting of a number of type checking options. Specifically, specifying <code>--strict</code> corresponds to specifying all of the following options (and may in the future include more options):</p>\n<ul>\n<li><code>--strictNullChecks</code></li>\n<li><code>--noImplicitAny</code></li>\n<li><code>--noImplicitThis</code></li>\n<li><code>--alwaysStrict</code></li>\n</ul>\n<p>In exact terms, the <code>--strict</code> option sets the <em>default</em> value for the compiler options listed above.\nThis means it is still possible to individually control the options.\nFor example,</p>\n<pre class=\"shiki\"><div class=\"language-id\">sh</div><div class='code-container'><code><span style=\"color: #000000\">--strict --noImplicitThis false</span></code></div></pre>\n<p>has the effect of turning on all strict options <em>except</em> the <code>--noImplicitThis</code> option. Using this scheme it is possible to express configurations consisting of <em>all</em> strict options except some explicitly listed options.\nIn other words, it is now possible to default to the highest level of type safety but opt out of certain checks.</p>\n<p>Starting with TypeScript 2.3, the default <code>tsconfig.json</code> generated by <code>tsc --init</code> includes a <code>\"strict\": true</code> setting in the <code>\"compilerOptions\"</code> section.\nThus, new projects started with <code>tsc --init</code> will by default have the highest level of type safety enabled.</p>\n<h2 id=\"enhanced---init-output\" style=\"position:relative;\"><a href=\"#enhanced---init-output\" aria-label=\"enhanced   init output permalink\" class=\"anchor before\"><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>Enhanced <code>--init</code> output</h2>\n<p>Along with setting <code>--strict</code> on by default, <code>tsc --init</code> has an enhanced output. Default <code>tsconfig.json</code> files generated by <code>tsc --init</code> now include a set of the common compiler options along with their descriptions commented out.\nJust un-comment the configuration you like to set to get the desired behavior; we hope the new output simplifies the setting up new projects and keeps configuration files readable as projects grow.</p>\n<h2 id=\"errors-in-js-files-with---checkjs\" style=\"position:relative;\"><a href=\"#errors-in-js-files-with---checkjs\" aria-label=\"errors in js files with   checkjs permalink\" class=\"anchor before\"><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>Errors in .js files with <code>--checkJs</code></h2>\n<p>By default the TypeScript compiler does not report any errors in .js files including using <code>--allowJs</code>.\nWith TypeScript 2.3 type-checking errors can also be reported in <code>.js</code> files with <code>--checkJs</code>.</p>\n<p>You can skip checking some files by adding <code>// @ts-nocheck</code> comment to them; conversely you can choose to check only a few <code>.js</code> files by adding <code>// @ts-check</code> comment to them without setting <code>--checkJs</code>.\nYou can also ignore errors on specific lines by adding <code>// @ts-ignore</code> on the preceding line.</p>\n<p><code>.js</code> files are still checked to ensure that they only include standard ECMAScript features; type annotations are only allowed in <code>.ts</code> files and are flagged as errors in <code>.js</code> files.\nJSDoc comments can be used to add some type information to your JavaScript code, see <a href=\"https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript\">JSDoc Support documentation</a> for more details about the supported JSDoc constructs.</p>\n<p>See <a href=\"https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files\">Type checking JavaScript Files documentation</a> for more details.</p>","headings":[{"value":"Generators and Iteration for ES5/ES3","depth":2},{"value":"Iterators","depth":5},{"value":"Generators","depth":5},{"value":"New --downlevelIteration","depth":5},{"value":"Async Iteration","depth":2},{"value":"Async iterators","depth":5},{"value":"Async Generators","depth":5},{"value":"The for-await-of Statement","depth":5},{"value":"Caveats","depth":5},{"value":"Generic parameter defaults","depth":2},{"value":"Example","depth":5},{"value":"New --strict master option","depth":2},{"value":"Enhanced --init output","depth":2},{"value":"Errors in .js files with --checkJs","depth":2}],"frontmatter":{"permalink":"/docs/handbook/release-notes/typescript-2-3.html","title":"TypeScript 2.3"}}},"pageContext":{"slug":"/docs/handbook/release-notes/typescript-2-3.html","isOldHandbook":true}}}