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:
- 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
- Stricter rules surrounding Type-Only Imports/Exports
- 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.