Work can be a fun when we know and understand each other well. Let's start conversation to new beginning
+91 63542 35108
To discuss what we can do for you Give us a Call
Tell us about your next project Write to us
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.
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.
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:
Let’s start with the NodeJS support:
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.
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.
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.
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.
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.
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.
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.
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.