TypeScript 5.5 Beta Release: Performance Optimizations
TypeScript – the strongly typed JavaScript variant brought to us by Microsoft – has officially reached a new beta with the v5.5 release with major improvements in performance and size optimizations for regular expression checking.
The TypeScript 5.5 Beta was officially introduced to us yesterday – on April 25th, 2024 – and can be access via the following command listed below. With that being said, we are expecting a Release Candidate version to be out in early June with a final release due in the last part of June.
npm -D typescript@betaDo you like what you are reading? We do recommend this next article – NodeJS 22: Require() Support & WebSockets – to you to continue learning with us.
ExiledTech
The latest version and beta release of TypeScript features a long list of improvements that we need to talk about. For the performance and size, monomorphization work has been done for the language service and public API. With this major change, the editor experience and buld tools that are using TypeScript API will get a lot faster according to the TypeScript Core Developers. This was also the same for Node and Symbol Objects in the TypeScript 5.0 release to ensure that they had a consistent set of properties and initialization order.
TypeScript 5.5 will introduce basic syntax checking on regular expressions. Up until now, the programming language usually always skipped over most to all of the regular expressions in application code. This is because that regular expressions technically have quite the extensible grammar while TypeScript will never make an effort to compile regular expressions to earlier versions of JavaScript. This means that common problems will usually go undiscoverable when a JavaScript Developer – who is using TypeScript for their application code – when using regular expressions.
Right below is a sample of what it looks like before syntax checking with regular expressions.
// TypeScript does not complain, even if the regex might have issues.
const regex = /(\d+/; // Missing closing parenthesis
Now with the TypeScript 5.5 release and beyond, we will have syntax checking like the following example right below.
// TypeScript 5.5 would throw a syntax error during compilation.
const regex = /(\d+/; // Error: Unmatched '('.
This Beta Release also features a huge reduction in the overall package size. The footprint on the hard drive goes from 30.3MB down to 20.5MB. Then the packed size goes down from 5.6MB down to 3.8MB. As part of the work to enable the isolatedDeclarations functions, Microsoft has improved how often TypeScript can directly copy input source code when producing the declaration files.
Another important feature to talk about is that TypeScript will now infer that a function returns a type predicate under certain conditions. With the control flow narrowing for even more constant index accesses. This means that TypeScript is now is able to narrow expressions in for obj[key] when both obj and key are effectively constant.
Here is the way when a function returns a type predicate under certain conditions before this release.
function isString(test: any): boolean {
return typeof test === "string";
}
// Explicit type guard needed
function padLeft(value: string | string[], padding: string): string {
if (!Array.isArray(value)) return padding + value;
return value.join("");
}
Following is an simple example code example of this in practice.
// Type predicate is inferred
function isString(test: any): test is string {
return typeof test === "string";
}
// No need for an explicit type guard, TypeScript narrows down the type automatically
function padLeft(value: string | string[], padding: string): string {
if (isString(value)) return padding + value;
return value.join("");
}
This release also makes API consumption of ECMAScript modules so much more easier. Before this update, if a JavaScript Developer is wanting to write their own ECMAScript module in NodeJS, named imports were not available from the typescript package. This has now been fixed. TypeScript also now supports a new @import comment tag that has the same syntax as ECMAScript imports.
The following two code examples – the first one is before this release and the second one is after this release – that align the syntax in comments with ECMAScript module syntax, allowing for better documentation and possibly tooling integration.
// Previously no special handling for imports in comments
/**
* This module depends on:
* import { myFunc } from './myModule';
*/
// @import tag in comments
/**
* @import { myFunc } from './myModule';
* This syntax is now recognized and can be used by tools for better linking or documentation.
*/
TypeScript 5.5 is also adding a transpileDeclaration API into the mix. This is to help design to generate a single declaration file based on input source text. The API is similar to transpileModule for compiling a single file of TypeScript code.
Right below is an example of the TranspileDeclaration that is helping to generate a single declaration file from source code.
import { transpileDeclaration } from 'typescript';
const source = `let myVar: string = "Hello, TypeScript!";`;
const declaration = transpileDeclaration(source);
console.log(declaration); // Outputs: declare let myVar: string;
Do you like what you're reading from the CoderOasis Technology Blog? We recommend reading our Implementing RSA in Python from Scratch series next.
ExiledTech
The CoderOasis Community
Did you know we have a Community Forums and Discord Server? which we invite everyone to join us? Want to discuss this article with other members of our community? Want to join a laid back place to chill and discuss topics like programming, cybersecurity, web development, and Linux? Consider joining us today!
