Exploring the Features of Typescript 5.0 for JavaScript Developers

![MicrosoftTeams-image (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3297518/c8deaa9c-623d-3214-9d70-0a425e12b09b.png)
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.

<H2>What's in TypeScript 5.0?</H2>
Let's quickly brief some of the new or upgrade features in Typescript 5.0. These are as follows.
<br>
<li>
<ul>
<b>Comparatively Smaller</b></ul>

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.

![MicrosoftTeams-image (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3297518/b614200f-5177-83f9-5fac-1fd98767bcae.png)
<b>Source</b>: Microsoft

<b><ul>Introducing --moduleResolution bundler</ul>

<p><code>--moduleResolution bundler</code> 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’.</p> 
<p>Although you could use <code>nodenext</code> and <code>node16</code> before, you needed to add "<code>./utils.mjs</code>" as the file extension to your imported components. However, with “<code>moduleResolution</code>”: “<code>bundler</code>” in Typescript 5.0, you can map to your modern bundlers such as swc, Parcel, Webpack, esbuild, and Vite.</p>

<b><ul>Implementation of const Type Parameters</ul>

<p>Typescript 5.0 introduces  ‘<code>const</code> Type Parameters’ to bring in a generics-based tool. It will improve the inference that you receive after calling functions.</p> 
<p>
<code>type Person = { readonly name: string; readonly age: number };<br>
function makePerson<const T extends Person>(name: T["name"], age: T["age"]): T {
  return { name, age } as T;<br>
}</code>
</p>

<p>In the above code snippet, I have used the <a href="https://github.com/microsoft/TypeScript/pull/51865">const modifier</a> in the type parameter. It is a declaration for <code>T</code>. This has allowed me to infer a particular type for the returned object.</p>

<p>For example, if you call <code>makePerson</code> like this:<br>
<code>const person = makePerson("Pratip", 54);</code>

TypeScript will infer the person type as:

<code>const person: { readonly name: "Pratip"; readonly age: 54}</code>

It is because the code uses <code>const</code> (modifier)in the type parameter declaration. It made the inferred readonly and restricted object mutation.

Without the <code>const</code>, the inferred type would appear as:
<code>const person: { readonly name: string; readonly age: number }</code>

<b><ul>A New Way of Using Decorators</ul>

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. 
<code>class Unified{
  createBlog() {
    console.log("Made blog");
  }
  createReach() {
    console.log("Planned a wide reach");
  }
}</code>

<p>In this snippet, <code>Unified</code> is a class. It has two methods. The first one is to create blogs and reach for the blogs. If you want both actions (<code>createBlog</code> and <code>createReach</code>) to check whether the <code>Unified</code> is authenticated, you have to repeat the same logic in both actions. However, <a href="https://github.com/microsoft/TypeScript/pull/50820">Decorators in Typescript 5.0</a> can make things easier.</p>
Let’s check.

<code>function isAuth(
  baseMethod: (...args: any[]) => any,
  _context: ClassMemberDecoratorContext
) {
  return function newMethod() {
    if (!auth) {
      return console.log("You require auth");
    }
    baseMethod();
  }
}</code>

Here, the <code>Decorator</code> function receives the context and <code>baseMethod</code> as arguments. It returns the <code>newMethod</code> 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. 
<code>class Unified {
  @isAuth
  createBlog() {
    console.log("Made blog");
  }
  @isAuth
  createReach() {
    console.log("Planned a wide reach");
  }
}</code><br>
Thus, we have found a better approach to using Decorator in Typescript 5.0.

<b><ul>Cleaner Code with Union Enums</ul></b>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. 
<H2>Typescript 5.0: What do Javascript developers need to know?</H2>
Here are some improvements made in Typescript 5.0, considering which JavaScript developers can increase the pace of program development.

<b><ul>Use of <code>--allowImportingTsExtensions</code></b></ul>

This extension will allow the import of Typescript files using extensions such as <code>.tsx, .mts , or .ts.</code> Further, it will enable interoperability between Typescript files. 
It is accessible only with the support of <code>--emitDeclarationOnly</code> or <code>--noEmit</code>. It is evident for JS-built projects. 

<b><ul>Multiple Files Support in extends</b></ul>

This functionality can be helpful for JS developers when they want to share a standard configuration with TS-based projects. 

<b><ul>Improved Function Overloading with <code>@overload</code></b></ul>

With <code>@overload</code> 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. 
<h2>Wrapping Up</h2>
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 “<code>npm install -D typescript</code>”.<br>  
Install the 5.0 version to explore all the added functionalities and improve your code development approach.