{"id":418118,"date":"2022-03-18T19:08:24","date_gmt":"2022-03-18T16:08:24","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/whats-new-in-typescript-4-6-cloudsavvy-it\/"},"modified":"2022-03-18T19:08:24","modified_gmt":"2022-03-18T16:08:24","slug":"whats-new-in-typescript-4-6-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/","title":{"rendered":"#What\u2019s New In TypeScript 4.6? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a22a8775d300\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a22a8775d300\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#%E2%80%9CWhats_New_In_TypeScript_46_%E2%80%93_CloudSavvy_IT%E2%80%9D\" >&#8220;What\u2019s New In TypeScript 4.6? \u2013 CloudSavvy IT&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#Control_Flow_Analysis_Improvements\" >Control Flow Analysis Improvements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#Constructor_Enhancements\" >Constructor Enhancements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#More_Inference_Improvements\" >More Inference Improvements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#ES2022_Targeting\" >ES2022 Targeting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#More_JavaScript_Syntax_and_Binding_Errors\" >More JavaScript Syntax and Binding Errors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#Another_Breaking_Change\" >Another Breaking Change<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-new-in-typescript-4-6-cloudsavvy-it\/#Summary\" >Summary<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CWhats_New_In_TypeScript_46_%E2%80%93_CloudSavvy_IT%E2%80%9D\"><\/span>&#8220;What\u2019s New In TypeScript 4.6? \u2013 CloudSavvy IT&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-15899\" data-pagespeed-lazy-srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/03\/f6ad612a.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/03\/f6ad612a.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/03\/f6ad612a.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"TypeScript logo on a dark blue background\" width=\"1202\" height=\"677\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Type<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> 4.6 is this year\u2019s first feature release for the statically typed JavaScript superset. It adds several improvements around constructors, compilation, and code analysis. There are also a couple of breaking changes to be aware of before you upgrade.<\/p>\n<h2 id=\"control-flow-analysis-improvements\"><span class=\"ez-toc-section\" id=\"Control_Flow_Analysis_Improvements\"><\/span>Control Flow Analysis Improvements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This release brings several enhancements for TypeScript\u2019s control flow analysis capabilities. They better equip TypeScript to more precisely understand how your code operates, leading to narrower type definitions and fewer unexpected errors.<\/p>\n<p>The first change concerns discriminant property unions that have been destructured from objects. It applies to cases where you\u2019re working with union types that consist of multiple objects. Individual objects in the union may have differences in their type definitions but still share some keys.<\/p>\n<p>It\u2019s common to use those shared keys to conditionally inspect the other parts of the data structure. TypeScript used to error when using this workflow with a destructuring assignment. The destructuring syntax created wholly new variables, devoid of the association that linked them as object properties. The compiler now remembers that the values originated from the same object, allowing simpler code to be written.<\/p>\n<p>The release announcement uses an example similar to this:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"typescript\">\n<pre class=\"de1\">type Action =&#13;\n    | {kind: \"Number\", data: number}&#13;\n    | {kind: \"String\", data: string};&#13;\n\u00a0\nfunction handle(action: Action) {&#13;\n\u00a0\n    const {kind, data} = action;&#13;\n\u00a0\n    if (kind === \"Number\") {&#13;\n        const square = (data * data);&#13;\n    }&#13;\n    else if (kind === \"String\") {&#13;\n        const lines = data.split(\"\\n\");&#13;\n    }&#13;\n\u00a0\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>TypeScript 4.5 would not permit this code. The destructuring assignment (<code>const {kind, data}<\/code>) created two independent variables; the compiler couldn\u2019t understand that <code>kind<\/code> being <code>Number<\/code> means <code>data<\/code> must be a <code>number<\/code> type. Now it will recognize that fact, letting you use the destructuring syntax with discriminated unions.<\/p>\n<p>Control flow analysis has also been tightened around dependent parameters. This syntax lets you specify complex rules for the nature of variadic parameters. Here\u2019s a type definition for a function using this behavior:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"typescript\">\n<pre class=\"de1\">type Func = (...args: [\"Number\", number], [\"String\", string]) =&gt; void;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This function\u2019s signature specifies that you can either pass <code>String<\/code> or <code>Number<\/code> as its first parameter. If you use <code>Number<\/code>, the next parameter must be a value of type <code>number<\/code>. Alternatively, a <code>string<\/code> can be given if it\u2019s following <code>String<\/code>.<\/p>\n<p>Similarly to the discriminated unions example above, TypeScript now narrows the type of dependent parameters based on the values that preceded them:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"typescript\">\n<pre class=\"de1\">const demo: Func = (kind, data) =&gt; {&#13;\n    if (kind === \"Number\") {&#13;\n        const square = (data * data);&#13;\n    }&#13;\n    else if (kind === \"String\") {&#13;\n        const lines = data.split(\"\\n\");&#13;\n    }&#13;\n};<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The compiler now appreciates that <code>data<\/code> must be a <code>number<\/code> if <code>kind<\/code> is <code>Number<\/code>. This code would have thrown an error with TypeScript 4.5.<\/p>\n<h2 id=\"constructor-enhancements\"><span class=\"ez-toc-section\" id=\"Constructor_Enhancements\"><\/span>Constructor Enhancements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The constructors of JavaScript classes that extend a parent must call <code>super()<\/code> before the <code>this<\/code> keyword can be used:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ Not allowed - \"this\" used before \"super\"<\/span>\n<span class=\"kw5\">class<\/span> B <span class=\"kw5\">extends<\/span> A <span class=\"br0\">{<\/span>\n    constructor<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">demo<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw5\">super<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"co1\">\/\/ Working correct order<\/span>\n<span class=\"kw5\">class<\/span> C <span class=\"kw5\">extends<\/span> A <span class=\"br0\">{<\/span>\n    constructor<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw5\">super<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">demo<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>TypeScript\u2019s historically been too strict in its enforcement of this requirement. Classes containing property initializers would be rejected if they had any code before the <code>super()<\/code> statement, even if it never referred to <code>this<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> example <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> C <span class=\"kw5\">extends<\/span> A <span class=\"br0\">{<\/span>\n\u00a0\n    demoProperty <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"co1\">\/\/ Unnecessarily treated as invalid <\/span>\n    constructor<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        example<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw5\">super<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This handling helped to optimize TypeScript\u2019s checks for genuine instances of <code>this<\/code> being used before <code>super()<\/code>. It also resulted in a lot of acceptable code failing to compile, forcing authors to refactor work that was actually valid JavaScript.<\/p>\n<p>TypeScript 4.6 solves this issue. The compiler now falls in line with vanilla JavaScript by allowing code before <code>super()<\/code> if it won\u2019t result in <code>this<\/code> being used. This gives you more freedom to write class constructors in the way that makes most sense for each situation. TypeScript will still detect any real cases of <code>this<\/code> being referenced too early.<\/p>\n<h2 id=\"more-inference-improvements\"><span class=\"ez-toc-section\" id=\"More_Inference_Improvements\"><\/span>More Inference Improvements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Indexed access inferences are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/click.linksynergy.com\/deeplink?id=2QzUaswX1as&amp;mid=24542&amp;u1=csit\/15898&amp;murl=https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fannouncing-typescript-4-6%2F%23indexed-access-inference-improvementshttps%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fannouncing-typescript-4-6%2F%23indexed-access-inference-improvements\">now more precise<\/a>. This gives the compiler visibility into indexed access types which index to mapped objects. Although this was already possible before, older TypeScript releases produced poor quality inference which didn\u2019t always have full awareness of the mapped object\u2019s types.<\/p>\n<p>TypeScript\u2019s recursion depth checks have also <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/click.linksynergy.com\/deeplink?id=2QzUaswX1as&amp;mid=24542&amp;u1=csit\/15898&amp;murl=https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fannouncing-typescript-4-6%2F%23improved-recursion-depth-checks\">been adjusted<\/a> to enable better detection of incompatible recursive types. The change can improve type check performance as it facilitates earlier bail out when a type\u2019s recursion begins to infinitely expand. The improvements focus on how recursion is applied to types that <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/generics.html\">use generics<\/a>.<\/p>\n<h2 id=\"es2022-targeting\"><span class=\"ez-toc-section\" id=\"ES2022_Targeting\"><\/span>ES2022 Targeting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>--target<\/code> flag has gained support for <code>es2022<\/code> as a value. It enables full use of ES2022 features, ensuring syntax such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tc39\/proposal-class-fields\">class fields<\/a> and the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Error\/Error#rethrowing_an_error_with_a_cause\"><code>Error.cause<\/code><\/a> property are preserved without transpilation in your stable builds.<\/p>\n<p>You can target ES2022 by passing the <code>--target es2022<\/code> flag to <code>tsc<\/code>. Alternatively, change <code>compilerOptions.target<\/code> to <code>es2022<\/code> in your project\u2019s <code>tsconfig.json<\/code> file:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"json\">\n<pre class=\"de1\">{&#13;\n    \"compilerOptions\": {&#13;\n        \"target\": \"es2022\"&#13;\n    }&#13;\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"more-javascript-syntax-and-binding-errors\"><span class=\"ez-toc-section\" id=\"More_JavaScript_Syntax_and_Binding_Errors\"><\/span>More JavaScript Syntax and Binding Errors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>TypeScript now surfaces more standard JavaScript syntax and binding errors. These errors will show up during compilation and as you open files in your editor with the TypeScript extension for Visual Studio, Visual Studio Code, or Sublime Text installed.<\/p>\n<p>Repeated <code>const<\/code> statements, incorrect use of keywords, and scoping mistakes will now be surfaced by TypeScript, giving you im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>te feedback as you work. The functionality can be disabled by adding a <code>\/\/ @ts-nocheck<\/code> comment at the top of your source files.<\/p>\n<p>This addition constitutes a breaking change as source files must now contain grammatically correct JavaScript. TypeScript\u2019s compiler previously ignored most kinds of JavaScript syntax error. You should use the comment to turn off the feature if you think your codebase will be incompatible with this enforcement.<\/p>\n<h2 id=\"another-breaking-change\"><span class=\"ez-toc-section\" id=\"Another_Breaking_Change\"><\/span>Another Breaking Change<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There\u2019s a second breaking change in this update: object rest expressions now <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/click.linksynergy.com\/deeplink?id=2QzUaswX1as&amp;mid=24542&amp;u1=csit\/15898&amp;murl=https%3A%2F%2Fdevblogs.microsoft.com%2Ftypescript%2Fannouncing-typescript-4-6%2F%23breaking-changes\">drop non-spreadable members<\/a> from generic objects. This improves consistency with the destructuring of non-generic types but means your existing variables may lack some properties they possessed in TypeScript 4.5.<\/p>\n<p>Properties with non-spreadable values such as scalars and functions will be omitted from rest expressions. This also applies to other non-spreadable cases such as non-public members of class instances and <code>this<\/code>. Code such as the following used to work but will now throw an error:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> Demo <span class=\"br0\">{<\/span>\n\u00a0\n    prop <span class=\"sy0\">=<\/span> <span class=\"st0\">\"example\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    sayHello<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        console.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"Hello World\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    methodWithRest<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n        <span class=\"kw1\">const<\/span> <span class=\"br0\">{<\/span>prop<span class=\"sy0\">,<\/span> ...<span class=\"me1\">rest<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"co1\">\/\/ ERROR - Non-spreadable value (function) will be dropped<\/span>\n        rest.<span class=\"me1\">sayHello<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>TypeScript 4.6 enhances type inference, improves child class constructor handling, and adds ES2022 as a supported output target. There are also a couple of narrow breaking changes in the form of expanded JavaScript syntax error detection and dropped non-spreadable object rest expression members. You can upgrade to the new release by running <code>npm update typescript<\/code> or <code>npm install typescript@latest<\/code> within your project\u2019s working directory.<\/p>\n<p>The update also marks the debut of an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/@typescript\/analyze-trace\">advanced new tool<\/a> for analyzing TypeScript\u2019s existing type generation traces. The Trace Analyzer works with the output from <code>tsc --generateTrace<\/code> to help you pinpoint how complex type expressions are slowing down the compiler.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/15898\/whats-new-in-typescript-4-6\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;What\u2019s New In TypeScript 4.6? \u2013 CloudSavvy IT&#8221; TypeScript 4.6 is this year\u2019s first feature release for the statically typed JavaScript superset. It adds several improvements around constructors, compilation, and code analysis. There are also a couple of breaking changes to be aware of before you upgrade. Control Flow Analysis Improvements This release brings several&#8230;<\/p>\n","protected":false},"author":1,"featured_media":418119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/03\/f6ad612a.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-418118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/418118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=418118"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/418118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/418119"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=418118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=418118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=418118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}