What are Big Features of TypeScript 4.2.4 and How to Implement Them?

4 min readAug 2, 2021

The new version of TypeScript that is 4.2 was launched on 23 February, 2021. It did came with a bunch of great features, performance enhancements, and bug fixes. You will learn below the significant ones you should be aware of.

Best improvements in TypeScript 4.2’s

More flexible rest elements in tuple types

Before the TypeScript 4.2 version, other elements is only visible at the finishing of the tuple type. If you were modeling the state of a two-player, for example, you may use this tuple type to hold the both Players with a complete list of the Moves they have played:

let gameState: [Player, Player, ...Move[]];

There is no need of the Moves to be at the end of the type in 4.2 version. Instead, they could be in the middle or also at the starting. If you want, you can easily expand the type as follows, to include what player’s chance it is. For some deeper clarity, here’s an advantage of TypeScript’s support for a better labeled tuple elements that will see in TypeScript 4.2.

let gameState: [player1: Player, player2: Player, ...moves: Move[], currentTurn: number];

Improved visibility into which files are included in your compiled program

The compiler of TypeScript (tsc) now has a new flag, --explainFiles, that outputs a bunch of files that is in the compilation as well as basic reasoning behind why they’re there, in a simple text format. This will turn helpful for you when building or fine-tuning compiler configuration intsconfig.json.

This is a unique feature and great foundation towards debugging build time problems. Besides, I want to grow more stronger in future releases. For instance, JSON output format for ingestion into some other tools for more advanced analysis.

Provided a default TypeScript config and an index.ts file with an easy console.log('hello, world!');, below is an example output from the --explainFiles flag:

node_modules/typescript/lib/lib.d.ts
  Default library
node_modules/typescript/lib/lib.es5.d.ts
  Library referenced via 'es5' from file 'node_modules/typescript/lib/lib.d.ts'
node_modules/typescript/lib/lib.dom.d.ts
  Library referenced via 'dom' from file 'node_modules/typescript/lib/lib.d.ts'
node_modules/typescript/lib/lib.webworker.importscripts.d.ts
  Library referenced via 'webworker.importscripts' from file 'node_modules/typescript/lib/lib.d.ts'
node_modules/typescript/lib/lib.scripthost.d.ts
  Library referenced via 'scripthost' from file 'node_modules/typescript/lib/lib.d.ts'
index.ts
  Root file specified for compilation

Good support for unused destructured variables

When you are on your way to destructure arrays or tuples, there are times when the elements you are highly interested in do not show up at the starting of the list. Here, “throwaway” variable names like _ or a, b, c, etc., are particularly used for the elements of no interest.

With the noUnusedLocals compiler option available, these unused local variables would cause TypeScript to throw an error until its 4.2 version.

Currently, you can just prepend the unused variable names with _ and TypeScript will easily ignore these variables and will not throw away an error if they are unused. For example, this is a new innovative feature that would be specifically useful when extracting bits of data from those rows of a CSV spreadsheet.

function* getCsvRows(): Generator<string[], void, void> { /* ... */ }for (const row of getCsvRows()) {
  // Destructure row, utilizing only the 1st, 4th, and 6th columns.
  const [id, _1, _2, name, _3, country] = row;
  // ... do something with id, name, and country
}

Moreover, prefixing an unused variable names with _ is a basic convention in situations like these. This is an example of tool authors developing thoughtfully around and supporting the already existing behavior of their users.

Smarter type system and improvements in performance

With every TypeScript launch, there were also numerous tiny improvements that are not groundbreaking on their own yet they create TypeScript incrementally better and very comfortable to use. To name them:

An error when trying to use thein operator on a primitive type. We normally call it as a runtime error (in JavaScript) however is now seen at compile time in TypeScript.
An internal limit on tuple size in conjuction with the spread syntax to enhance performance of compilation.
Better parsing and interpretation of vanilla JavaScript files.
A new flag known as--noPropertyAccessFromIndexSignature that can assist lessen errors from object property name misspellings under serious situations.

Wrapping Up

With the release of 4.2, the team of developers is working to come up with TypeScript 4.3. Till now, you can have a look at the TypeScript 4.3 iteration structure and the rolling characteristic roadmap to get track of what we is happening. I believe that most users will stick to TypeScript 4.2 at present, and I hope this launch is simple to adopt and makes you super productive. Moreover, TypeScript won’t dissapoint you and brings you joy in your coding.