Microsoft has recently released TypeScript 4.7 a little over a month ago. The update includes significant updates, introductions, and enhancements. After the not-so-exciting version of TypeScript that was v4.6, TypeScript 4.7 seems to be a treat for the eyes and for developers too.

How Microsoft Want to Change TypeScript for Good?
Let’s hear it from Microsoft’s great proposal and how it’ll change the TypeScript and JavaScript development for the…

The team had been focusing on NodeJS integration, which was the long-awaited feature. It was first released with the 4.5 version but still needed some polishing. Finally, the integration with NodeJS is shipped as a stable feature. Apart from that, there are many other enhancements that the team at ashutec is excited about.

Differences in JavaScript and TypeScript: Which one is Better for Frontend Development?
JavaScript and TypeScript; both are popular scripting languages used excessively for frontend development projects…

So, in this article, we’ll get to know what major features and updates are included this time around. Let’s get started without further delay:

What’s New with TypeScript 4.7?

Let’s start with the NodeJS support:

1. ECMAScript Module Support in NodeJS

NodeJs has been working to support the ECMAScript modules which have been a very difficult feature as the Node ecosystem is built on different modules. Due to that fact, interoperating between the two brings large challenges.

However, NodeJS 12 and later includes support for ESM and has been implemented well. The 4.5 version of TS included the nightly-only support for ESM in NodeJS. This was to get feedback from the users and let library authors ready themselves for broader support.

2. Control Over Module Detection

The ambiguity between the existing script code and the new module code has been the biggest issue with the introduction of new modules of JS. JS code runs slightly differently and has different scoping rules. Thus, tools here make the decisions on how each JS file runs.

The TS 4.7 introduces a new option called moduleDetection, which can take three values namely; ‘auto’, ‘legacy’, and ‘force’. TypeScript in ‘auto’ mode will not only look for import and export statements but also check for the “type” field in package.json is set to “module”. Also, it will check whether the file is a JSX or not.

The ‘force’ setting ensures that every non-declaration file is treated as a module. The legacy option will go back to the old behavior of only seeking out import or export statements to determine whether the file is a module or not.

3. Control-Flow Analysis for Bracketed Element Access

The latest TS version narrows the types of element accesses when the indexed keys are literal types. Earlier, TS would not consider any type guards on obj[key] and would have no idea if it was a string. But not the TS 4.7 knows that it is a string.

Also, TS can now correctly check that computed are initialized by the end of a constructor body. It can report an error telling us that the [key] property wasn’t definitely assigned by the end of the constructor.

4. Improved Function Inference in Objects and Methods

TS 4.7 is now more capable to perform more granular inferences from functions within objects and arrays. This allows the types of functions to consistently flow in a left-to-right manner just like for plain argument.

Inference failed in some cases as knowing the type of their produce functions would indirectly request the type of arg before finding a good type for T. TS now accumulates functions that could contribute to the inferred type T and infers lazily.

5. Instantiation Expression

On some occasions, functions can be a bit more general than we want them to be. Sometimes we want to create a more specialized set of functions for making boxes of wrenches and hammers. To keep doing that today, you would need to wrap makebox in other functions or use an explicit type for an alias of makeBox.

However, wrapping a call to makeBox is a bit wasteful thing and writing a full signature of makewrenchBox could get unwieldy. So, it just wants to alias makeBox while replacing all of the generics in its signature. And TS 4.7 is capable to do exactly that. It can now take functions and constructors and feed them type arguments directly.

6. Extends Constraints on infer Type Variables

These conditional types are a bit of a power-user feature. They allow you to match and infer against the shape of types. For instance, when writing a conditional type that returns the first element of a tuple type if it’s a string-like type.

Here the process is slightly more manual and less declarative. Instead of just pattern matching on the type and giving the first element a name, you can fetch the 0th element. This could get a lot trickier if you were dealing with types more complex than tuples. Thus, infer can simplify things.

7. Resolution Customization with moduleSuffixes

The TS 4.7 now has support for moduleSuffixes which helps customize how module specifiers are looked up. This feature is helpful, particularly for React Native projects where each target platform can use a separate tsconfig.json with differing moduleSuffixes.

8. Resolution Mode

Node’s ECMAScript resolution and the mode of containing files and the syntax help determine how imports are resolved. Still, it would be useful to reference the types of commonJS modules from an ECMAScript and vice versa.

Conclusion

Microsoft has come up with so many exciting features and enhancements with the release of the new TypeScript 4.7. The scripting language brings safety to JavaScript. Looking at these upgrades, we can surely say that the team has put in a lot of hard work and contributions to add new features and improvements. A lot of handy features can be used to scale and optimize your time and efficiency.