TypeScript 5.5: Exciting New Features

TypeScript has become increasingly popular among developers as a more structured alternative to JavaScript. It helps define types within your code, making it easier to catch errors like typos etc on time.

Recently, TypeScript rolled out version 5.5, introducing several new features. In this article, we’ll take a closer look at four(4) of these new features and explain them in a simple, easy-to-understand manner.

1. Inferred Type Predicates

One of the key improvements in TypeScript 5.5 is better type inference, especially with arrays and filtering.

What does this mean? As your code progresses, the type of a variable can change. With Inferred Type Predicates, TypeScript now adjusts the type definitions accordingly.

Let's look at an example:

const namesAndAges = ["Elijah", "Sophia", "Liam", "Isabella", "Mason", 23, 24];

const ages = namesAndAges.filter(age => typeof age === 'number');

ages.forEach((age) => console.log(age + 1));

In TypeScript 5.0(Previous Versions):

In this example, namesAndAges is an array of type (string|number)[]. We're filtering out non-numeric values, leaving us with an array of numbers (ages). However, TypeScript 5.0 still sees the array ages as (string|number)[], causing an error when trying to add 1 to age due to potential string types.

Previously, we might have needed to explicitly cast age to number like this:

ages.forEach((age) => console.log(age as number + 1));

TypeScript 5.5 simplifies this process:
With TypeScript 5.5, TypeScript handles this type of inference more accurately, as shown below:

This improvement makes type inference a lot better making TypeScript more intuitive and effective in catching potential errors early.

2. Control Flow Narrowing for Constant Indexed Accesses

Another significant enhancement in TypeScript 5.5 is better type narrowing for accessing object properties.

What does this mean?
Let's break it down with an example:

type ObjType = Record<string, number | string>;

function downCase(obj: ObjType, key: string) {
    if (typeof obj[key] === "string") {
        console.log(obj[key].toLowerCase());
    }
}

In TypeScript 5.0(Previous Versions):

In this example, the downCase function checks if the property's value is of type string, and if so, converts it to lowercase. However, the previous TypeScript versions can’t be sure if obj[key] is a number or a string, leading to an error when trying to use the toLowerCase method.

To avoid this in previous versions, we could do something like this:

type ObjType = Record<string, number | string>;

function downCase(obj: ObjType, key: string) {
    const value = obj[key];
    if (typeof value === "string") {
        console.log(value.toLowerCase());
    }
}

Here, an intermediary variable value is used to help TypeScript understand the type.

With TypeScript 5.5, this workaround is no longer needed. The new version automatically narrows the type correctly based on the condition typeof obj[key] === "string" as shown below:

Because Typescript is aware that the property’s value is of type string, all string methods are available for use as shown below

3. Regular Expression Syntax Checking

TypeScript 5.5 also brings a useful feature for developers working with regular expressions: syntax checking on regular expressions.

What does this mean?
Before this update, TypeScript would skip over regular expressions and not validate their syntax, potentially allowing errors to slip through unnoticed. With TypeScript 5.5, basic syntax checks are now performed on regular expressions.

Let’s explain this with an example:

In TypeScript 5.0(Previous Versions):

const regex = /hello(world/;

In the example above, the regular expression /hello(world/ has an unclosed parenthesis (. Regular expressions require that every opening parenthesis has a corresponding closing parenthesis.

In previous versions of TypeScript, this mistake would go unnoticed, and no error would be flagged.

No error was flagged in Typescript v5.0

With TypeScript 5.5, this regular expression will be flagged as an error because the syntax is incorrect due to the unmatched parenthesis.

This improvement helps catch common mistakes in regular expressions early, making your code more reliable.

An error was flagged in TypeScript 5.5

The fixed code in TypeScript 5.5

Note: TypeScript’s regular expression support is limited to regular expression literals. If you use new RegExp with a string literal, TypeScript will not check the provided string's syntax. You can read more here

4. Support for New ECMAScript Set Methods

TypeScript 5.5 has added support for the new methods introduced to the Set object in JavaScript. These methods include union, intersection, difference, symmetricDifference, and more, expanding how you can work with Sets.

What does this mean?
These new Set methods allow for more powerful and concise operations on sets, such as combining or finding common elements between them.

Let’s break this down with an example:

In previous TypeScript versions:

let primaryColors = new Set(["red", "blue", "yellow"]);
let secondaryColors = new Set(["green", "orange", "purple"]);

// Trying to use the new Set methods would result in an error
// The previous versions of TypeScript would not recognize these methods
console.log(primaryColors.union(secondaryColors)); // Error: Property 'union' does not exist on type 'Set<string>'
console.log(primaryColors.intersection(secondaryColors)); // Error: Property 'intersection' does not exist on type 'Set<string>'

Before TypeScript 5.5, attempting to use these methods would result in errors because TypeScript didn’t recognize them. This was because these methods were newly introduced in the latest ECMAScript specification and weren’t yet supported by TypeScript.

With TypeScript 5.5, these new methods are now fully supported. You can use them directly without TypeScript flagging any errors.

In TypeScript 5.5:

let primaryColors = new Set(["red", "blue", "yellow"]);
let secondaryColors = new Set(["green", "orange", "purple"]);

console.log(primaryColors.union(secondaryColors)); // Combines both sets
console.log(primaryColors.intersection(secondaryColors)); // Finds common elements

TypeScript 5.5 brings significant enhancements like improved type inference, support for new ECMAScript Set methods, and better regular expression syntax checking. Part 2 of this article will cover additional features introduced in version 5.5.

In case you're wondering, I used TypeScript Playground to test and demonstrate these updates. Explore TypeScript 5.5 features yourself on the TypeScript Playground.

If you're excited about TypeScript 5.5 like I am, drop a like or comment below to share your thoughts on these awesome new features!

Stay tuned for more updates in Part 2! Until then, happy coding!!! :)

Comments

[abbatyya]

Support for ES Set method not working even in ts version 5.6.2 yet

[Elfayeur]

On TS Playground, I get error:

Property 'union' does not exist on type 'Set<number>'.
Do you need to change your target library?
Try changing the 'lib' compiler option to 'esnext' or later.

It works if you put "lib": ["ESNext"]

[abbatyya]

Good, thanks