What's new in Typescript 4.3 Release

Typescript 4.3 is now available to use, we can upgrade Typescript to latest version easily from the Older Typescript version using below "npm install" command, know what's new in Typescript 4.3, upgrading to Typescript latest version will help to use the new features introduced in the release and will help to improve the application's performance. 

How to Upgrade Typescript older Version to Typescript 4.3:

npm install -g typescipt

OR run following command:

npm install -g typescript@4.3

Now, check the Typescript Version installed on the machine using following command:

tsc -v

Below are the new Features released in Typescript 4.3:

1. Separate Write Types on Properties:

Typescript 4.3 allows to specify different types on read and write of the properties. Before Typescript 4.3 it was not allowed to specify different types for get and set accessors of properties, it used to give error as: "'get' and 'set' accessors must have the same type", now in Typescript 4.3 we can specify different read & write types on properties as shown below:

1. class Profile{
2.     #profileId= 0;
3.     get profileId(): number {
4.         return this.#profileId;
5.     }
6. //Allows to specify Multiple Write Types in the Set accessors
7.     set profileId(value: string | number | boolean) {
8.         let id= Number(value);
9.         // Check for NaN.
10.         if (!id) {
11.             this.#profileId= 0;
12.             return;
13.         }
14.         this.#profileId= id;
15.     }

16. }

2. Override and the -noImplicitOverride flag:

Before Typescript 4.3, there was no "override" keyword to override a super class method, Now after Typescript 4.3, if a method marked with override in the child class, Typescript makes sure that the same method name should exist in the Parent class, otherwise it will throw an error.

1. class Employee{
2.     displayName() {
3.         console.log('employee class');
4.     }
5. }
6. 
   
7. class Manager extends Employee{
8.     override displayName() {
9.         console.log('manager class');
10.     }
11. }

Typescript 4.3 also provides a new flag : "--noImplicitOverride", if it is turned on, then it will give an error if you are trying to override the superclass method, but forgot to mention "override" keyword in the child class. So make sure you use override keyword in the child class if you are tying to override the super class method.

Now if we remove displayName() method from Employee class, it will give an error as : "This member cannot have an 'override' modifier because it is not declared in the base class 'Employee' "

3. Template string type improvements:

Template string type either construct new string like types by concatenating OR match pattern of other string like types:

1. type color = "yellow" | "red";
2. type quantity= "one" | "two";
3. type car = '${Quantity | Color} car'; //It is same as : type car= "one car" | "two car" // "red car" | "blue car";

or match pattern of other string-like types as shown below:

declare let val1: '${number}-${number}-${number}';
declare let val2: '100-200-300'

// Works!
val1= val2;

4. ECMAScript #private class elements:

Typescript 4.3 allows properties, methods and accessors to set as private to restrict access to those fields outside the class. We can make the fields private using "#". In below example, we have made the method #validateName() as private, we have made #getId() reading accessors as private which restricts the use of these fields outside the class and gives an error, but it can be accessed inside the clas.

1. class Employee {
2.     #validateName() {
3.         //...
4.     }
5. 
   
6.     get #getId() {
7.         return 10;
8.     }
9. 
   
10.     displayName() {
11.         // This works, because we can access private fields inside the class.
12.         this.#validateName();
13.         return this.#getId;
14.     }
15. }
16. 
    
17. new Employee ().#validateName();
18. // error!
19. // Property '#validateName' is not accessible
20. // outside class 'Employee ' because it has a private identifier.
21. 
    
22. new Employee ().#getId;
23. // error!
24. // Property '#getId' is not accessible
25. // outside class 'Employee ' because it has a private identifier.

5. ConstructorParameters Works on Abstract Classes:

It is now possible to add ConstructorParameters on the abstract class and it works after Typescript 4.3 release. Below example shows the abstract class with ConstructorParameters:

1. abstract class Employee {
2.    constructor(name: string, id: number) {
3. }