Announcing TypeScript 4.7 RC with ECMAScript Module (ESM) Support

Published : May 27, 2022

It’s great news for front-end developers that Microsoft has announced the Release Candidate (RC) of TypeScript 4.7!

Well, being a developer, you must be familiar with TypeScript. But if you are a reader or not aware of TypeScript, allow me to clarify that it’s a language that builds on JavaScript and adds syntax for types. Here, types define the functions you call and values you work with. Hence, TypeScript fetches this information and helps you avoid mistakes like missing arguments, typos, or null and undefined functionality.

However, if you, as a JavaScript developer, have already used JavaScript in Visual Studio Code or Visual Studio, you have already been using TypeScript indirectly.

Even though a question pops up in your mind about the difference between TypeScript and JavaScript development, you can actually make yourself clear with our detailed article – TypeScript vs JavaScript.

Now we are going to talk about some of the main features, which I think are noteworthy, and you need to get your hands on this TypeScript 4.7 RC release.

On This Page

Announcing TypeScript 4.7
ESM Support in Node.JS
CommonJS Interoperability
Better Function Inference in Objects and Methods
Other Capabilities in TypeScript 4.7
Wrapping Up

Announcing TypeScript 4.7

Microsoft releases the strongly typed JavaScript, TypeScript 4.7 with ECMAScript Module (ESM) support for Node.js 16, as well as a multitude of coding enhancements.

Several new capabilities relating to ECMAScript module support in Node are included in the TypeScript 4.7 release candidate. Control flow analysis for computed properties, instantiation expressions, and enhancements are the prime features in TypeScript 4.7 RC.

The problem comes from the use of two different JavaScript module systems in TypeScript tooling: ECMAScript modules (ESM) in the official JavaScript standard and CommonJS (CJS) in Node.js, the popular open source, cross-platform, back-end JavaScript runtime environment commonly used to execute JavaScript code outside of a web browser.

Actually, the problem was addressed by Daniel Rosenwasser – a Senior Program Manager at TypeScript, in this blog post,

For the last few years, Node.js has been working to support ECMAScript modules (ESM). This has been a very difficult feature, since the Node.js ecosystem is built on a different module system called CommonJS (CJS). Interoperating between the two brings large challenges, with many new features to juggle; however, support for ESM in Node.js was largely implemented in Node.js 12 and later. Around TypeScript 4.5, we rolled out nightly-only support for ESM in Node.js to get some feedback from users and let library authors ready themselves for broader support.

TypeScript 4.7 includes two new module settings: node12 and nodenext, which add this capability via high-level features. They're used in the package.json with a new Node.js setting called type that allows developers to specify a module or commonjs to control whether .js files are interpreted as ES modules or CommonJS modules, CommonJS being the default.

New file extensions, CommonJS interop, exports/imports, and other features are also included.

More control over module detection is another new feature, which helps to address inconsistencies in how Node.js and TypeScript handle module entry points, existing "script" code versus new module code, import and export statements, and more.

You can download TypeScript 4.7 via NPM or NuGet.

npm install -D typescript

Having Trouble in Implementing the Latest Version of TypeScript?
Get Help from Experts

ECMAScript Module Support in Node.JS

ECMAScript is a JavaScript standard that ensures web page interoperability across several browsers. Since Node.js is based on a distinct module called CommonJS, ECMAScript support has proven to be a difficult functionality to integrate. Moreover, experimental support became a part of nightly builds in previous releases to get input from users. Node 12 and nodenext are two new modules in TypeScript 4.7 that have become prime features.

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

CommonJS Interop

TypeScript 4.7 allows you to import CommonJS modules with a default export as ES modules. In some cases, Node.js can synthesize named exports from CommonJS modules.

// ./foo.cts
export function helper() {
console.log("hello world!");
}
// ./bar.mts
import { helper } from "./foo.cjs";
// prints "hello world!"
helper();

Better Function Inference in Objects and Methods

Functions included within objects and arrays can now be inferred with greater precision in TypeScript 4.7. This allows the types of these functions to flow from left to right in the same way that conventional arguments do. This is demonstrated in the snapshot below, which was provided by Daniel Rosenwasser, Senior Program Manager at TypeScript.

declare function f<T>(arg: {
produce: (n: string) => T,
consume: (x: T) => void }
): void;
// Works
f({
produce: () => "hello",
consume: x => x.toLowerCase()
});
// Works
f({
produce: (n: string) => n,
consume: x => x.toLowerCase(),
});
// Was an error, now works.
f({
produce: n => n,
consume: x => x.toLowerCase(),
});
// Was an error, now works.
f({
produce: function () { return "hello"; },
consume: x => x.toLowerCase(),
});
// Was an error, now works.

f({
produce() { return "hello" },
consume: x => x.toLowerCase(),
});

Because knowing the type of their produce functions would implicitly require the type of arg before finding an appropriate type for T, inference failed in several of these situations.

TypeScript now collects functions that potentially contribute to the inferred type of T and infers it lazily from them.

To use this release, you can execute the following npm command,

npm install typescript@beta

You can get editor support for those using Visual Studio Code by following the instructions here.

Other Capabilities in TypeScript 4.7

When the indexed keys are literal kinds and unique symbols, control flow analysis for bracketed element access now narrows the types of element access.
TypeScript 4.7 adds the moduleDetection option to control module detection.
moduleSuffixes to customize the lookup of module specifiers.
TypeScript may now infer more granularly from functions that use objects and arrays. This allows the types of these functions to flow in a consistent left-to-right direction, exactly like simple arguments.
Type parameters can be passed directly to functions and constructors.
Developers can provide variance on type parameters explicitly.
Imports are organized in a group-aware manner.
Snippet completions for object literal methods.
The length property of a readonly tuple is now readonly. This is a game-changing shift.
For Go to Source Definition, there is a preview editor command.
Another breaking change is that TypeScript now requires stronger checks that the provided type is truly an object when writing a ...spread in JSX. Values of the kinds unknown and never, and, more rarely, null and undefined, can no longer be spread into JSX elements as a result.

Wrapping Up

We've seen how TypeScript supports ECMAScript modules and how to configure a module to take advantage of it.

In a nutshell, TypeScript 4.7 is a great one for JavaScript developers. Support for ESM modules in Node has been an important feature, and it's fantastic to see it in the release. Moreover, other features like organize imports, groups-aware, or object method snippet completion make TypeScript 4.7 the best one!

So, what are you waiting for? Try your hands on TypeScript 4.7 now!

Jigar Shah

Jigar Shah is the Sr. Content Lead at Radixweb. He is an avid reader and tech enthusiast. He’s capable enough to change your world with his words. A cup of tea and a good book make an ideal weekend for him.

View All Posts

Build Software Application to 3X Your Biz Growth

Name*

Email*

Country