VOOZH about

URL: https://blog.logrocket.com/whats-new-in-typescript-4-2/

⇱ What’s new in TypeScript 4.2 - LogRocket Blog


2021-04-20
794
#typescript#what's new
Matthew Swensen
43084
👁 Image

See how LogRocket's Galileo AI surfaces the most severe issues for you

No signup required

Check it out

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.

👁 TypeScript Logo

🚀 Sign up for The Replay newsletter

The Replay is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

TypeScript 4.2’s top enhancements

More flexible rest elements in tuple types

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 Players and a list of the Moves they’ve played:

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

With 4.2, the Moves 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];

Increased visibility into which files are included in your compiled program

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.

Better support for unused destructured variables

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.

Smarter type system and performance improvements

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:

  • A helpful error when trying to use the in operator on a primitive type. This is normally a runtime error (in JavaScript) but is now caught at compile time in TypeScript
  • An internal limit on tuple size in conjunction with the spread syntax, to improve compilation performance
  • Better parsing and interpretation of vanilla JavaScript files
  • A new flag called --noPropertyAccessFromIndexSignature that can help reduce errors from object property name misspellings under certain situations

More details and resources

A 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 understands everything users do in your web and mobile apps.

👁 LogRocket Dashboard Free Trial Banner

LogRocket lets you replay user sessions, eliminating guesswork by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks, and with plugins to log additional context from Redux, Vuex, and @ngrx/store.

With Galileo AI, you can instantly identify and explain user struggles with automated monitoring of your entire product experience.

Modernize how you understand your web and mobile apps — start monitoring for free.

👁 Image
👁 Image
👁 Image

Stop guessing about your digital experience with LogRocket

Get started for free

Recent posts:

How to build a virtual engineering team with Gemini CLI subagents

Learn how to use Gemini CLI subagents to delegate frontend, backend, testing, and docs tasks to specialized agents with guardrails and clear ownership.

👁 Image
Emmanuel John
Jun 18, 2026 ⋅ 10 min read

Debug Next.js apps with AI agents and next-browser

Learn how next-browser gives AI agents runtime context for debugging Next.js apps, including React props, hydration, PPR, forms, and performance.

👁 Image
Emmanuel John
Jun 17, 2026 ⋅ 9 min read

Stop hardcoding LLM SDKs: Dynamic LLM routing with OpenRouter and Next.js

Build dynamic LLM routing in Next.js with OpenRouter, TanStack AI, task classification, model fallbacks, and cost-aware routing.

👁 Image
Chizaram Ken
Jun 16, 2026 ⋅ 13 min read

What is TSRX?: What JSX would look like if it were designed today

TSRX adds first-class control flow, conditional hooks, and scoped styles to React via a TypeScript compiler extension — no new framework required.

👁 Image
Ikeh Akinyemi
Jun 12, 2026 ⋅ 6 min read
View all posts

Hey there, want to help make our blog better?

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 now