TypeScript 5.5 Release - For The Community!

TypeScript 5.5 Release: For The Community!

The much anticipated TypeScript 5.5 release is upon us! Despite it being a minor version update, this is one of the largest Typescript releases we’ve had in a while. There is quite an extensive list of changes (link to official docs below) In this blog we'll be highlighting a few exiting features.

What's New in TypeScript 5.5

TypeScript 5.5 introduces several exciting features and improvements:

• Inferred Type Predicates
• Control Flow Narrowing for Constant Indexed Accesses
• The JSDoc @import Tag
• Regular Expression Syntax Checking
• Support for New ECMAScript Set Methods

Inferred Type Predicates

Previous versions of Typescript's control flow analysis worked quite well, however, often enough you’d get errors if your type was deeply nested, not due to your code incorrect but rather a limitation of the control flow analysis. What do I mean by this? Let’s throw some football in the mix to clear things up:

// not every country will have a star footballer to play
function getStarPlayers(countries: string[]) {
  // players: (Player | undefined)[]
  const players = countries
    .map(country => starPlayers.get(country))
    .filter(player => player !== undefined);

  for (const player of players) {
    player.play(); // This will now work! Whereas prior to Typescript 5.5 we would get a `possibly undefined` error despite us filtering out undefined just 2 lines above 
  }
}

Typescript infers a type predicate for the filter function, this results in Array.prototype.filter being aware of the nested type thus being more precise and not throwing an unexpected type error.

Type Import in JSDoc

What is JSDoc?

JSDoc is the standardized way of documenting your code within JavaScript (JS). Typescript (TS) then extends JSDoc helping developers benefit from the type system for both TS and JS files.

What does this mean?

With latest release, you can now import types from other files or modules directly within JSDoc comments. This feature would be especially useful for JavaScript projects using TypeScript for type checking. It also enables reusability of type definitions. While this is currently possible it was quite cumbersome. It has been simplified in TypeScript 5.5 and now supports a new @import comment tag that has the same syntax as ECMAScript imports.

// before Typescript 5.5 
/**
 * @param {import("./some-module").SomeType} myValue
 */
function doSomething(myValue) {
}

// Typescript 5.5 >
/** @import { SomeType } from "some-module" */
/**
 * @param {SomeType} myValue
 */
function doSomething(myValue) {
}

Support for New ECMAScript Set Methods

TypeScript 5.5 adds support for new Set methods proposed for JavaScript, including union, intersection, and symmetric difference. New Set Methods

The new ECMAScript Set methods are:

• union
• intersection
• difference
• symmetricDifference

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

// new set methods
const union = new Set([...setA, ...setB]); // {1, 2, 3, 4, 5} - joins
const intersection = new Set([...setA].filter(x => setB.has(x))); // {3}
const symmetricDifference = new Set([...setA, ...setB].filter(x => !setA.has(x) || !setB.has(x))); // {1, 2, 4, 5}

The change is beneficial in-terms of aligning TS with the new JS features to ensure continued compatibility. And of course, We also have the benefit of not needing to rewrite commonly used set methods :)

Regular Expression Syntax Checking

You don't really need it until you NEED it. TypeScript 5.5 will compile regular expressions, catching syntax errors earlier on in development as well as ensuring that the regex is compatibility with the target ECMAScript version.

Why do we need it?

Having the ability to validate regex during compile time will save devs plenty of time debugging. Despite there being other tools out there that can validate our regular expressions, the built-in validation now means we are no longer dependent on those tools.

// Validates regex as well as compatibility based on ECMAScript target version
const regex = /(?<=\d{4})-(?=\d{4})/; 

// TypeScript error: Unterminated character class in regular expression
const anotherInvalidRegex = /[a-zA-Z0-9+/;

Migrating to TypeScript 5.5 - should you? 👀

Yes, yes, yes! As mentioned, this is one of the bigger Typescript releases we've had. The new features further align JavaScript and Typescript as well as truly making the developer experience much smoother.

A couple of things to consider when migrating:

1. Changes to Type Inference and Control Flow Analysis

• TypeScript 5.5 introduces more precise type inference and control flow analysis. This is largely dependent on how you've coded but its is a consideration to make

3. Stricter rules surrounding Type-Only Imports/Exports
4. Use Migration Tools like ts-migrate can help automate some of the more straightforward changes required.

TypeScript 5.5 is a significant step forward, offering powerful new features and improvements. Whether you're a seasoned TypeScript user or just getting started, this release has something for everyone. Upgrade today and take advantage of all that TypeScript 5.5 has to offer.

Additional Resources

• Official TypeScript 5.5 Release Notes
• Infer type predicates from function bodies using control flow analysis - PR
• Inferring a type predicate