Version 4.2 of TypeScript was released on 23 February, 2021, and with it a number of nice features, bug fixes, and performance improvements. Here are the most important ones you should be aware of.
Previous to 4.2, rest elements could only appear at the end of the tuple type. If we were modeling the state of a two-player game, for example, we might use this tuple type to hold our two Player
s and a list of the Move
s they’ve played:
let gameState: [Player, Player, ...Move[]];
With 4.2, the Move
s don’t have to be at the end of the type; they could be in the middle or even at the beginning. If desired, we can now expand our type as follows, to include which player’s turn it is. For additional clarity, we’ll take advantage of TypeScript’s support for labeled tuple elements (which is not new in 4.2):
let gameState: [player1: Player, player2: Player, ...moves: Move[], currentTurn: number];
TypeScript’s compiler (tsc
) now includes a new flag, --explainFiles
, that outputs a list of files included in the compilation as well as basic reasoning behind why they’re there, in a simple text format. This can be very helpful when developing or fine-tuning compiler configuration in tsconfig.json
.
This feature is a nice first step toward debugging build time issues, and I expect to grow more robust and powerful in future releases (for example, a JSON output format for ingestion into other tools for more advanced analysis).
Given a default TypeScript config and an index.ts
file with a simple console.log('hello, world!');
, here is some 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
Try it yourself using this example repository (complete with devcontainer.json
) on GitHub.
When destructuring tuples or arrays, there are times when the elements you are interested in don’t appear at the beginning of the list. In these cases, “throwaway” variable names such as _
or a
, b
, c
, etc., are used for the elements of no interest.
With the noUnusedLocals
compiler option on, however, these unused local variables would cause TypeScript to throw an error until version 4.2.
Now, simply prepend the unused variable names with _
and TypeScript will happily ignore these variables and will not throw an error if they are unused. As an example, this new feature would be particularly useful when extracting bits of data from the 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 }
Prefixing unused variable names with _
is a common convention in situations like these; this is an example of tool authors building thoughtfully around and supporting the existing behavior of their users.
As with any TypeScript release, there were also a number of smaller enhancements that are not groundbreaking on their own but they make TypeScript incrementally better and more comfortable to use. To name just a few:
in
operator on a primitive type. This is normally a runtime error (in JavaScript) but is now caught at compile time in TypeScript--noPropertyAccessFromIndexSignature
that can help reduce errors from object property name misspellings under certain situationsA full list of all the enhancements can be seen on the TypeScript project’s releases page on GitHub, as well as the release announcement on the TypeScript blog. Those are the top highlights of the TypeScript 4.2 release. To dive deeper in to the changes or learn more about TypeScript generally, check out the following resources:
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowGet to know RxJS features, benefits, and more to help you understand what it is, how it works, and why you should use it.
Explore how to effectively break down a monolithic application into microservices using feature flags and Flagsmith.
Native dialog and popover elements have their own well-defined roles in modern-day frontend web development. Dialog elements are known to […]
LlamaIndex provides tools for ingesting, processing, and implementing complex query workflows that combine data access with LLM prompting.
One Reply to "What’s new in TypeScript 4.2"
We just need immutable records and pattern matching