What fantastic new features does TypeScript’s latest release include?

TypeScript 4.6 was supposed to be released on February 22nd. On the 28th, it was finally shipped. TypeScript was named “Most Adopted Technology” based on year-over-year growth.

TypeScript has dominated the front-end developer experience and front-end programming language industry from every angle.

You’ve most likely heard of TypeScript by now. In this post, we’ll go over the highlights of TypeScript 4.6.

TypeScript 4.6 was released with a number of major modifications and performance enhancements. Let’s have a look at what TypeScript 4.6 has to offer to software developers.

Control Flow Analysis, ES2022, TypeScript Trace Analyzer, and More in TypeScript 4.6

Here’s a brief primer on TypeScript if you’re not already familiar with it.

What is TypeScript, exactly?

It’s a language that extends JavaScript by adding type syntax.When coding, types are very important since they determine what sort of data you use and what kind of functions you call.

Developers may avoid typos, missing parameters, and testing for null and undefined with this information. This enhances the developer experience because faults are detected at build time rather than causing difficulties at runtime.

TypeScript also offers intelligent code completion, go-to-definition, a sophisticated editing environment, and more.

TypeScript 4.6’s New Features:

• Control flow analysis for discriminatory unions that have been destructed
• Allows code in structures before super()
• Suggestions for JSDoc names
• Recursion depth checks have been improved.
• Analyzer for TypeScript traces
• ES2022
• Improvements in indexed access inference
• In react-jsx, superfluous parameters are removed.
• Checks for syntax and binding errors in the JavaScript file
• Other noteworthy modifications

Let’s take a closer look at what’s new and improved in TypeScript 4.6.

Control flow analysis for discriminatory unions that have been destructed

TypeScript may now narrow down a function’s signature using this version. TypeScript now can limit types based on a discriminated property. It will determine whether the destructed type is a discriminated union. If true, it can restrict the sorts of variables depending on other variables’ checks.

TypeScript’s Control Flow Analysis examines code to determine the optimum type of inference based on variable usages. Type Inference is what TypeScript is known for.

TypeScript may now limit parameters that depend on others when inferring from a signature using this type of rest parameter.

Allows code in structures before super()

When working with JavaScript, you must always call super() before referring to this. TypeScript follows the same rules.It was formerly considered an error to include any code at the beginning of constructure if the enclosing class utilised any property initializers.

This check has been simplified in TypeScript 4.6 since it now allows other code to run before super() while still guaranteeing that super() executes at the top level before any reference to this. This modification now permits non-this, non-super code to be root-level constructure statements.

This made it inexpensive to verify that super() is called before this is mentioned, but it resulted in a lot of legitimate code being rejected. TypeScript 4.6 has made that check far more permissive, allowing other code to execute before super() while still ensuring that super() happens at the top-level before any references to this.

Suggestions for JSDoc names

When parameter names do not match between your function and its JSDoc comment, TypeScript now makes suggestions.

The @param tag in JSDoc allows developers to document arguments. However, if you wish to modify the names of parameters or if comments become out of date, you will be notified when you type-check JavaScript files.

This may be accomplished by using the checkJs option or by adding a / @ts-check remark at the start of the file. You can obtain this information for TypeScript files in your editor using the TypeScript 4.6 version.

Analyzer for TypeScript traces

This is a new tool included in this version that displays the information generated by the –generateTrace option in a more accessible manner. This information aids developers in identifying computationally costly types and diagnosing TypeScript compiler faults.

This material is difficult to read and comprehend. Developers will get a more legible and consumable view of this information using this tool.

ES2022

ES2022 is now supported by TypeScript’s — target option. You can define the ECMAScript target version using target. With this new— target ES2022 setting or with — lib ES2022, new built-in functionality such as the at() method on Arrays, Object.hasOwn, or the cause option on new Error may be utilized. With added support for ES2022, features like class fields now have a consistent output target.

Improvements in indexed access inference

Multiple difficulties with indexed access types applied to mapped types existed in the previous TypeScript version. Using a method that incorporates distributive object types, this version has addressed the majority of the issues. TypeScript can now infer to indexed access types that instantly index into a mapped object type in this version.

In react-jsx, superfluous parameters are removed.

Because removing unneeded arguments might reduce bundle sizes, TypeScript 4.6 removed the void 0 arguments from react.jsx.

Checks for syntax and binding errors in the JavaScript file

In the JavaScript file, TypeScript 4.6 introduced a number of syntax and binding problems. When utilising editors like Visual Studio or Visual Studio Code, this is possible.

Also, if you run JavaScript code through the TypeScript compiler without adding the @ts-check comment to the top of the file, you’ll notice these new problems.

Other noteworthy modifications

Other breaking changes in TypeScript 4.6 include object rest expressions losing members that appear to be unspreadable on generic objects.

In addition, TypeScript now highlights JavaScript syntax and binding issues in your code, including redundant declarations, improper modifiers, and more. It went undiscovered until TypeScript syntax was mistakenly used in a JavaScript file, which caused issues.

Before we finish…

Thank you for following me this far! Let’s meet there. You may leave a comment on my Linkdin profile.That’s all I have for now. I’ll be back soon with my next work. Please look for yourself till then.