TypeScript 4.6: What’s New?

TypeScript was given the award for “Most Adopted Technology” based on year-on-year growth.

TypeScript has dominated the front-end developer experience and front-end programming language market from all perspectives.

By now, you already know what TypeScript is. In today’s article, we are covering highlights of TypeScript 4.6, released on 28th February.

Microsoft shipped TypeScript 4.6 with some notable changes and performance improvements. Let’s see what TypeScript 4.6 has to offer to the software development community.

TypeScript 4.6: Control Flow Analysis, ES2022, TypeScript Trace Analyzer, And More

If you are not familiar with TypeScript, here is a quick introduction for you.

What Is TypeScript?

It is a language that builds on JavaScript and adds syntax for types.

Types have significant importance while coding as it defines what kind of values you are using and what kind of functions you are calling.

This information saves developers from typo mistakes, missing arguments, or checking for null and undefined. This improves developer experience as developers become aware of the mistakes while compile time rather those errors cause problems at runtime.

In addition to this, TypeScript provides intelligent code completion, go-to-definition, powerful editing experience, and more.

What’s New In TypeScript 4.6:

• Control flow analysis for destructed discriminated unions
• Allows code in constructions before super()
• JSDoc name suggestions
• Improved recursion depth checks
• TypeScript trace analyzer
• ES2022
• Indexed access inference improvements
• Control flow analysis for dependent parameters
• Removal of unnecessary arguments in react-jsx
• Syntax and binding error checks in JavaScript file
• Other notable changes

Let’s see what has been improved and added in detail in the TypeScript 4.6 version.

• Control Flow Analysis For Destructed Discriminated Unions:

With this version, TypeScript is able to narrow down the signature for a function. TypeScript now can narrow types based on a discriminated property. It will check if the destructed type is a discriminated union. If yes, it can narrow the types of variables based on checks of other variables.

Control Flow Analysis is a TypeScript feature that analyzes code to obtain the best type inference based on variable usages. This is what TypeScript is famous for – Type Inference.

• Allows Code In Constructions Before Super():

While working with JavaScript, it is mandatory to call super() before referring to this. TypeScript does follow the same.

Previously, it was an error to contain any code at the starting of a constructor if its containing class used any property initializers. In TypeScript 4.6, this check has become easier as it now permits other code to run before super() while still ensuring that super() executes at the top level before any reference to this.

This change now allows non-this, non-super code to be root-level statements in the constructor.

• JSDoc Name Suggestions:

TypeScript now gives suggestions for when parameter names don’t match between your function and its JSDoc comment.

JSDoc allows developers to document parameters using an @param tag. But, if you want to change the name of parameters or in case of comments falling out of date, you would know about this when you perform type-checking on JavaScript files.

You can do this using either checkJs option or by adding a // @ts-check comment to the top of the file.

With TypeScript 4.6 version, you can get this information for TypeScript files in your editor itself.

• Improved Recursion Depth Checks:

This is one of the notable features of TypeScript 4.6.

TypeScript works with a structural type system. Thanks to improved recursion depth checks available in this new version, TypeScript is now better at handling errors caused by infinitely expanding types.

This feature saves work and time for checking type compatibility. TypeScript is no longer concerned with false positives from explicitly-written types. This improves relationship checking for recursive types in many ways.

• TypeScript Trace Analyzer:

This is a new tool available with this version to provide a more readable view of the information provided by –generateTrace flag. This information helps developers to identify some of the computationally expensive types and help diagnose issues in the TypeScript compiler.

This information is hard to read and digest. With this tool, developers will have a more readable and digestible view of this information.

• ES2022:

TypeScript’s – – target option now supports es2022. Target allows you to specify ECMAScript target version. New built-in functionality like at() method on Arrays, Object.hasOwn, or the cause option on new Error can be used with this new – – target es2022 setting or with – – lib es2022.

Features like class fields now have a stable output target with this support for es2022.

• Indexed Access Inference Improvements:

In the previous TypeScript version, there were multiple issues related to indexed access types applied to mapped types.

This release has solved most of the problems related to this using an approach that includes distributive object types. In this release, TypeScript now can infer to indexed access types which immediately index into a mapped object type.

• Control Flow Analysis For Dependent Parameters:

In TS, you can express a combination of different parameters for your use. You let the compiler know that you want an array of different combinations of parameters for your method.

For example, when you are passing arguments to function, if your first argument is a string, its second argument has to be a string. If your first argument is the string ‘number’, its second argument should be a number.

Here, arguments to func depend totally on the first argument. With this release, TypeScript can narrow parameters that depend on each other.

• Removal Of Unnecessary Arguments In React-jsx:

Removing unnecessary arguments can improve bundle sizes and that’s the reason TypeScript 4.6 dropped the void 0 arguments in react-jsx.

• Syntax And Binding Error Checks In JavaScript File:

TypeScript 4.6 introduced a set of syntax and binding errors in the JavaScript file. This can be available when you are using editors like Visual Studio or Visual Studio Code.

Also, you can see these new errors if you run JavaScript code through the TypeScript compiler without turning on checkJs or @ts-check comment to the top of the file.

• Other Notable Changes:

TypeScript 4.6 comes with other breaking changes like object rest expressions now dropping members that seem to be unspreadable on generic objects.

Moreover, TypeScript now shows JavaScript syntax and binding errors in your file such as duplicate declarations, incorrect modifiers, and more. Previously, it was unnoticed except for errors for accidentally using TypeScript syntax in a JavaScript file.

TypeScript 4.6: What’s Next?

The TypeScript programming language is open-source software, licensed under the Apache 2 license. TypeScript has seen remarkable growth over the period of time, and developers love using it as it offers better tooling at any scale.

If you compare TypeScript vs. JavaScript, then, technically TypeScript is JavaScript with static typing. TypeScript supports static typing while JavaScript doesn’t.

Why TypeScript Over JavaScript?

• Optional Static Typing
• New features and browser compatibility
• More reliable, scalable, and easier
• Easy code refactoring and rewriting
• It is more explicit
• Enhanced developer experience
• Tighter integration with Editors

If you are using TypeScript, then check out TypeScript 4.6, and let us know about your recent experience. If you are a JavaScript fan, we would recommend you to use TypeScript in your file and let us know how it helps improve the developer experience.