TypeScript 4.7: All About New Features and Improvements

We’ll try to comprehend the new interesting features of typescript 4.7, which was released on May 24 and is just as thrilling as previous versions. They were concentrating on Node.js integration, as we all know. This isn’t the only feature we’re looking forward to. React native developers, on the other hand, are in for a pleasant surprise. So, let’s have a look at some of the most important upgrades and features in the new edition.

ECMAScript Module Support in Node.js

First of all, let’s understand

What is ECMAScript?

ECMAScript is a JavaScript standard that ensures web page compatibility across several browsers.

Node.js is built on a very different module called CommonJS. As the trend toward polymorphic apps grows, on typescript 4.5 experimental support was added in nightly builds to gather feedback from users. Node12 and nodenext are two new modules in TypeScript 4.7 that allow this feature.

{
"compilerOptions": {
"module": "nodenext",
}
}

CommonJS Interoperability

CommonJS modules can now be imported as ES modules with a default export. They both need to work together.

Let’s look at example now

// File ./test.cts
export function Welcome() {
    console.log("Welcome to typescript 4.7");
}
//File ./main.mts
import { helper } from "./test.cjs";
// prints " Welcome to typescript 4.7"
Welcome();

Instantiation Expressions

This is a wonderful feature included in this version. We develop a more specific function from a generic function in order to make it reusable. Currently, we use a wrapper function to handle this. However, we can now create alias from generic functions in this new version.

Let’s look at by example

Control-Flow Analysis:

This is something that Typescript keeps improving and simplifying with each release. In this edition, there is a new improvement on computed properties. In more general circumstances, type guard will be considered. Let’s look at by example.

Module Detection

We already faced ambiguity where a particular file is just a script or a module. So to overcome this issue a new option was introduce called “moduleDetection.moduleDetection“. It lets us to configure to parse module.

There are three values and it may take one of these.

• Legacy
• Auto
• Force

When targeting only browsers, having moduleDetection: force and module: esnext is recommended. In such case, we don’t want commonJs modules to be used.

Conclusion

In a nutshell, this is a cool version. There’s node support, and there’s also something for React developers. Actually, seeing a live ESM module in a node is fantastic. However, this edition piqued my interest in future iterations. “Export property in package.json file”, “Module detection”, “Customization with moduleSuffixers” and many more features are included. So now it’s over to you.

That’s for now. Happy Coding!