As an updated version of TypeScript, TypeScript 5.0 was released in March 2023 to make this strongly typed Javascript language much faster. This version has brought in new standards for using decorators, simplified configuration, improved JSDoC functionality, and added improved features to build ESM projects in bundlers and Node.
What's in TypeScript 5.0?
Let's quickly brief some of the new or upgrade features in Typescript 5.0. These are as follows.-
Comparatively Smaller
The most recent Typescript 5.0 is better than the previous Typescript 4.9 version in terms of space. The former is 41 % smaller than the 4.9 version of Typescript. Thus, with a small-sized npm package, the 5.0 version will not clutter the development system with unnecessary resources.
Source: Microsoft
Introducing --moduleResolution bundler
--moduleResolution bundler is introduced to model the operation of the modern bundlers. It works based on the contemporary Node-style resolution. Also, it considers the protocols for ‘imports’ and ‘exports’.
Although you could use nodenext and node16 before, you needed to add "./utils.mjs" as the file extension to your imported components. However, with “moduleResolution”: “bundler” in Typescript 5.0, you can map to your modern bundlers such as swc, Parcel, Webpack, esbuild, and Vite.
Implementation of const Type Parameters
Typescript 5.0 introduces ‘const Type Parameters’ to bring in a generics-based tool. It will improve the inference that you receive after calling functions.
type Person = { readonly name: string; readonly age: number };
function makePerson(name: T["name"], age: T["age"]): T {
return { name, age } as T;
}
In the above code snippet, I have used the const modifier in the type parameter. It is a declaration for T. This has allowed me to infer a particular type for the returned object.
For example, if you call makePerson like this:
const person = makePerson("Pratip", 54);
TypeScript will infer the person type as:
const person: { readonly name: "Pratip"; readonly age: 54}
It is because the code uses const (modifier)in the type parameter declaration. It made the inferred readonly and restricted object mutation.
Without the const, the inferred type would appear as:
const person: { readonly name: string; readonly age: number }
A New Way of Using Decorators
In Typescript 5.0, you can use Decorators to add functionality to the introduced classes. While undertaking this task, you don’t have to change the source code.
Let’s take an example of a code snippet for better understanding.
class Unified{
createBlog() {
console.log("Made blog");
}
createReach() {
console.log("Planned a wide reach");
}
}
In this snippet, Unified is a class. It has two methods. The first one is to create blogs and reach for the blogs. If you want both actions (createBlog and createReach) to check whether the Unified is authenticated, you have to repeat the same logic in both actions. However, Decorators in Typescript 5.0 can make things easier.
function isAuth(
baseMethod: (...args: any[]) => any,
_context: ClassMemberDecoratorContext
) {
return function newMethod() {
if (!auth) {
return console.log("You require auth");
}
baseMethod();
}
}
Here, the Decorator function receives the context and baseMethod as arguments. It returns the newMethod along with the logic. As you can notice from the code snippet, we have allowed the base method to run and check the validation of auth.
Now, introduce the decorator to this method.
class Unified {
@isAuth
createBlog() {
console.log("Made blog");
}
@isAuth
createReach() {
console.log("Planned a wide reach");
}
}
Thus, we have found a better approach to using Decorator in Typescript 5.0.
Cleaner Code with Union Enums
The 5.0 version of Typescript makes every enum into union enums. It does this by introducing a specific type for every computed member. Now you can narrow every enum and consider their referenced members as types.
For further specifications, you can check the GitHub repository on Enum unification.
Typescript 5.0: What do Javascript developers need to know?
Here are some improvements made in Typescript 5.0, considering which JavaScript developers can increase the pace of program development.Use of
--allowImportingTsExtensions
This extension will allow the import of Typescript files using extensions such as .tsx, .mts , or .ts. Further, it will enable interoperability between Typescript files.
It is accessible only with the support of --emitDeclarationOnly or --noEmit. It is evident for JS-built projects.
Multiple Files Support in extends
This functionality can be helpful for JS developers when they want to share a standard configuration with TS-based projects.
Improved Function Overloading with
@overload
With @overload functionality, JS developers can increase the readability of the code.
Get a detailed description of this functionality from the official post of the Typescript 5.0 release.
Wrapping Up
TypeScript 5.0 is an excellent release. Overall, it focuses on stability, bug fixes, and the scope of further improvements in the upcoming release. You can easily install Typescript 5.0 in your dev system using “npm install -D typescript”.Install the 5.0 version to explore all the added functionalities and improve your code development approach.