📢 TypeScript 4.6: What's new and improved in this update


Microsoft releases TypeScript 4.6 with some new features and improvements detailed here. To get the latest version of TypeScript, follow these steps. - Story by Kunal Chowdhury on





TECH NEWS DESK:

TypeScript is an open-source programming language, developed and maintained by Microsoft, and hosted in GitHub. TypeScript is a superset of JavaScript and can be used to develop JavaScript applications for both client-side and server-side.

 

Microsoft now announces TypeScript 4.6 that now adds several new features and improvements. Here's everything that you would like to know about the new changes in TypeScript 4.6, and how to download.

 

Microsoft announces TypeScript 4.6

 

Download the latest version of TypeScript

TypeScript can be downloaded from NuGet by using the command Install-Package Microsoft.TypeScript.MSBuild -Version 4.6.2. You can also download the latest version of TypeScript by running the following npm command npm install typescript.

 

If you are using Visual Studio 2017 or Visual Studio 2019, you can get editor support from the Visual Studio Marketplace. If you are using Visual Studio Code, get the editor support from here.

 

 

What's new and improved in TypeScript 4.6

  • Allowing Code in Constructors Before super()
  • Control Flow Analysis for Destructured Discriminated Unions
  • Improved Recursion Depth Checks
  • Indexed Access Inference Improvements
  • Control Flow Analysis for Dependent Parameters
  • --target es2022
  • Removed Unnecessary Arguments in react-jsx
  • JSDoc Name Suggestions
  • More Syntax and Binding Errors in JavaScript
  • TypeScript Trace Analyzer

 

 

Allowing Code in Constructors Before super()

In JavaScript classes it’s mandatory to call super() before referring to this. TypeScript enforces this as well, though it was a bit too strict in how it ensured this. In TypeScript, it was previously an error to contain any code at the beginning of a constructor if its containing class had any property initializers.
This made it cheap to check that super() gets called before this is referenced, but it ended up rejecting a lot of valid code. TypeScript 4.6 is now much more lenient in that check and permits other code to run before super()., all while still ensuring that super() occurs at the top-level before any references to this.

Control Flow Analysis for Destructured Discriminated Unions

TypeScript is able to narrow types based on what’s called a discriminant property. For example, in the following code snippet, TypeScript is able to narrow the type of action based on every time we check against the value of kind.
This lets us work with objects that can hold different data, but a common field tells us which data those objects have. This is very common in TypeScript; however, depending on your preferences, you might have wanted to destructure kind and payload. Previously TypeScript would error on these – once kind and payload were extracted from the same object into variables, they were considered totally independent.

Improved Recursion Depth Checks

TypeScript has some interesting challenges due to the fact that it’s built on a structural type system that also provides generics. In a structural type system, object types are compatible based on the members they have.
TypeScript 4.6 is now able to distinguish these cases. As the language is no longer concerned with false-positives from explicitly-written types, TypeScript can conclude that a type is infinitely expanding much earlier, and save a bunch of work in checking for type compatibility. As a result, libraries on DefinitelyTyped like redux-immutable, react-lazylog, and yup saw a 50% reduction in check-time.

Indexed Access Inference Improvements

TypeScript now can correctly infer to indexed access types which immediately index into a mapped object type.

Control Flow Analysis for Dependent Parameters

A signature can be declared with a rest parameter whose type is a discriminated union of tuples. This means that the arguments to func depends entirely on the first argument. When the first argument is the string "str", then its second argument has to be a string. When its first argument is the string "num", its second argument has to be a number.

--target es2022

TypeScript’s --target option now supports es2022. This means features like class fields now have a stable output target where they can be preserved. It also means that new built-in functionality like the at() method on Arrays, Object.hasOwn, or the cause option on new Error can be used either with this new --target setting, or with --lib es2022.
This functionality was implemented by Kagami Sascha Rosylight (saschanaz) over several PRs, and we’re grateful for that contribution!

Removed Unnecessary Arguments in react-jsx

Previously, when compiling code like the following in --jsx react-jsx, TypeScript would produce void 0 argument which was unnecessary in this emit mode. TypeScript 4.6 now drops the void 0 argument.

JSDoc Name Suggestions

Previously TypeScript would only tell you about this when performing type-checking on JavaScript files – when using either the checkJs option, or adding a // @ts-check comment to the top of your file.
You can now get similar information for TypeScript files in your editor! TypeScript now provides suggestions for when parameter names don’t match between your function and its JSDoc comment.

More Syntax and Binding Errors in JavaScript

TypeScript has expanded its set of syntax and binding errors in JavaScript files. You’ll see these new errors if you open JavaScript files in an editor like Visual Studio or Visual Studio Code, or if you run JavaScript code through the TypeScript compiler – even if you don’t turn on checkJs or add a // @ts-check comment to the top of your files.

TypeScript Trace Analyzer

Occasionally, teams may encounter types that are computationally expensive to create and compare against other types. TypeScript has a --generateTrace flag to help identify some of those expensive types, or sometimes help diagnose issues in the TypeScript compiler. While the information generated by --generateTrace can be useful (especially with some information added in TypeScript 4.6), it can often be hard to read in existing trace visualizers.

 








External Publications (Outreach / Editorial)
Join Us