Developed as a superset of JavaScript, TypeScript exists for one reason – to make writing JavaScript code easier. To facilitate that aim, Microsoft has released regular updates to the language since its 2012 release, culminating in the March 2023 announcement of TypeScript 5.0.
TypeScript 5.0 apparently makes the language “smaller, simpler, and faster,” which is achieved by introducing several new features. But crucially, TypeScript 5.0 isn’t a disruptive release. It doesn’t dramatically change how the language works, meaning every one of these features is intended to expand upon a current user’s toolset.
With that said, this is what’s new in Microsoft’s latest release.
1 – Updated and Modernized Decorators
Though decorators have been available in TypeScript for a while, the 5.0 release takes them from an experimental to a full-fledged feature. They’re used to provide a reusable method for customizing the behavior of classes and their members.
Microsoft provides the following example of where decorators come into play:
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet() {
console.log("LOG: Entering method.");
console.log(`Hello, my name is ${this.name}.`);
console.log("LOG: Exiting method.")
}
}
Here, you’ll see multiple console.log calls that help the “greet” member of the “Person” class to conduct an appropriate greeting. If this pattern of console.log commands is something you believe you can use elsewhere, you can now create a function that you can call upon anywhere in your code.
That’s a decorator.
In this case, Microsoft says the created function might look something like this:
function loggedMethod(originalMethod: any, _context: any) {
function replacementMethod(this: any, ...args: any[]) {
console.log("LOG: Entering method.")
const result = originalMethod.call(this, ...args);
console.log("LOG: Exiting method.")
return result;
}
return replacementMethod;
}
Here, you’ll see the creation of a “loggedMethod” function that turns the console.log calls of the original code into a function that you can insert back into the code. When you run your code, it’ll carry the name of every class or method that you “decorate” with your new function.
The feature can become quite complex, especially once you start introducing types and context into your decorators. The key is that you’ll be able to call upon your decorators anywhere within your code, with Microsoft saying they’ll be used far more than they’re written.
There are also some limits to decorators. For instance, TypeScript 5.0 doesn’t allow you to change or restrict the types assigned to classes and method signatures yet.
2 – Improved Enum Use
In TypeScript, Enums are constructs that allow you to create a set of named constants. These constants are then passed into a function, with TypeScript 5.0’s additions making them more flexible than they were previously.
This is most obvious in error throwing.
For instance, Kinsta provides the following short example:
enum Color {
Red,
Green,
Blue,
}
function getColorName(colorLevel: Color) {
return colorLevel;
}
console.log(getColorName(1));
Previously, passing a wrong level number to a function wouldn’t result in an error message from TypeScript. The function would just try to run with the incorrect number. Now, TypeScript will immediately display an error, allowing you to locate any bugs or issues in your code quickly.
Furthermore, Enums have been expanded to turn all of them into “union Enums.” Each computed member of the Enum receives a unique type, allowing you to reference those members as types elsewhere in your code.
3 – Infrastructure Changes and Optimizations
Perhaps the most significant improvements made in TypeScript 5.0 relate to the infrastructure that underpins the language. As Microsoft promised, it’s much faster, with the following enhancements increasing the speed of build times:
- Playwright – Build time is improved by 87%
- MUI – Build time is 90% faster
- VS Code – Build time is improved by 80%
- Outlook Web – Build time improves by 82%
These enhancements are seen almost across the board. For instance, the TypeScript compiler is now 87% faster at startup, as well as having an 87% faster self-build time.
Most of these optimizations are a result of Microsoft migrating from namespaces to modules within the language. This opens the door for coders to create modular – and more efficient – infrastructure while incorporating more modern built tools.
Other tweaks include reducing the amount of data stored within the compiler, which likely accounts for the faster startup and self-build times. Uniformity across object types is also further encouraged, both by greater balance in memory usage across objects and the reduction of polymorphic operations. In other words, there’ll be fewer operations declared without an implementation inside a parent class, essentially reducing the number of “incomplete” operations within your code.
4 – Const Type Parameters
One of the most common issues highlighted by TypeScript users is that it was often too vague when inferring an object. TypeScript usually did this to create the possibility of mutations later on, though the result was that users had less control over what their code did. If you wanted to ensure a specific type was used, you might find that TypeScript failed to achieve your desired inference.
Specificity was requested, with Microsoft delivering through the new “const” modifier.
You can add this modifier to a type parameter declaration, leading to the “const” inference becoming the default for all uses of that type. Crucially, the modifier doesn’t outright reject any mutable values you may use, meaning a mutable type constraint could still deliver unexpected results.
5 – Implementation of Customization Flags
With JavaScript now being capable of modeling “hybrid” resolution rules, you may find that some of the tools you use differ in the level of support they have for TypeScript. With TypeScript 5.0, Microsoft offers you a way to set flags that enable or disable a feature based on whether it works with your particular configuration.
The following are a couple of examples:
allowImportingTsExtensions
This feature usually allows TypeScript files to import one another as long as they have an appropriate extension, such as .ts or .tsx.
The problem is that these import paths may not be resolvable in a JavaScript output file when you run the program. With “--noEmit” and “--emitDeclarationOnly,” you can now control when the “allowImportingTsExtensions” flag is enabled, limiting the possibility of these runtime import issues from occurring.
customConditions
With the “customConditions” command, you can now have TypeScript refer to a list of conditions that need to succeed whenever the platform resolves from an imports or exports field of a package.json. The conditions you specify are simply added to the default conditions your resolver uses, allowing you to specify conditions that aren’t automatically checked.
There are many more examples, with Microsoft’s Developer Blog for TypeScript 5.0 delving deeper into them. For instance, you can also pass several new flags under the --build mode, including the following:
--sourceMap--declaration--declarationMap--inlineSourceMap--emitDeclarationOnly
These commands make it easier for you to customize and set conditions for parts of your build that may implement different production or development builds. Ultimately, TypeScript 5.0 gives you more control through the use of more flexible customization flags throughout your code.
6 – Runtime Requirement Changes
With the introduction of TypeScript 5.0 come some changes to your runtime requirements. Now, the platform uses ECMAScript 2018, with its minimum engine expectation being set to 12.20. You need to upgrade to this version – especially if you’re a Node.js user – if you want to take advantage of TypeScript 5.0’s new features.
It’s also worth noting that Microsoft has removed some interfaces that it deems out-of-date or unnecessary. Plus, various changes to lib.d.t.s have been implemented that may impact how code created in a previous version of TypeScript runs. For instance, some properties have been converted into numeric literal types rather than numbers, and you’ll notice that methods for cutting, copying, and pasting have been moved to different interfaces.
7 – The moduleResolution bundler
Though introduced in TypeScript 4.7, the “moduleResolution bundler” has seen some minor alterations with the 5.0 version of the platform. It still models how a bundler works, as well as supporting a hybrid lookup strategy, if one is required. That allows you to use the command for modern bundlers, such as Webpack, Parcel, and Vite, as well as encouraging compatibility with any bundler that uses hybrid lookup.
With TypeScript 5.0, Microsoft introduces more flexibility into its module resolution strategy. It allows you to customize TypeScript’s resolution parameters, increasing the platform’s compatibility with different runtimes and bundlers. Plus, the “moduleResolution bundler” command can now help you resolve imports and exports related to package.json.
8 – “export type *” Support
With TypeScript 3.8, Microsoft introduced the ability to carry out type-only imports. But the syntax created didn’t offer support for exports – a clear oversight that has been resolved with TypeScript 5.0.
You now have the ability to export a type from a module or export a type as a namespace from a module. The change brings type-only exporting into parity with the equivalent importing, allowing for more flexibility with module exports in the latest version of the platform.
Explore What Microsoft Offers With TypeScript 5.0
The main takeaway here is that Microsoft has gone to great lengths to make TypeScript a more attractive proposition for coders. The boosts in speed are a welcome – and much-needed – set of optimizations that make the platform easier to use. Further speed boosts may come as a result of the full implementation of decorators, which allow you to reuse code rather than typing it out time and time again.
Other changes – such as the creation of new flags – are intended to give you more control over how your code works or, in the case of “const” parameters, what your code calls. Experimentation may be needed. Plus, you may find that a handful of the changes affect your older code. But in all, TypeScript 5.0 represents a significant step forward in the usability and flexibility of Microsoft’s platform.
