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.
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.
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.
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.
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.
TypeScript now can correctly infer to indexed access types which immediately index into a mapped object type.
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.
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!
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.
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.
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.
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.
Thank you for visiting our website!
We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.
We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.
