Post
Ask Question

New Features In TypeScript 4.3

Introduction

Typescript 4.3 is now available, and we can use the following command "npm install" to easily upgrade Typescript from the previous version of Typescript to the latest version.

Let's learn about the new features in Typescript 4.3 and use the new features introduced in this version to help improve application performance.

Upgrade From Typescript older Version to Typescript 4.3

npm install -g typescript

You can also check the typescript version by using the following command,

tsc -v

In this article, we are going to talk about the new features introduced in Typescript 4.3.

Separate Write Types on Properties

Typescript 4.3 allows you to specify different types when reading and writing properties. Before Typescript 4.3, it was not allowed to specify different types for property getter and setter accessors, which resulted in errors, such as: "Get and set accessors must have the Same type" we can now use different types to specify the type in the Typescript 4.3 attribute to read and write them, as shown below,

class Profile{
    #profileId= 0;
    get profileId(): number {
        return this.#profileId;
    }
//Allows to specify Multiple Write Types in the Set accessors
    set profileId(value: string | number | boolean) {
        let id= Number(value);
        // Check for NaN.
        if (!id) {
            this.#profileId= 0;
            return;
        }
        this.#profileId= id;
    }
}

Override and noImplicitOverride flags

Prior to Typescript 4.3, there was no override keyword for superclass methods. Now after Typescript 4.3, Typescript ensures that if a method is marked as overridden in a subclass, the same method name exists in the main class, otherwise an error occurs.

Typescript 4.3 also provides a new flag: "noImplicitOverride",

If you try to override the superclass method but forget to mention the keyword "override" in the subclass, an error will be thrown.

If you want to override the method of the parent class, be sure to use the override keyword in the subclass.

Now, if we remove the displayName () method from the Employee class, we will get the following error.

"This member cannot have the override modifier because it is not declared in the base class employee."

class Employee{
    displayName() {
        console.log('employee class');
    }
}

class Manager extends Employee{
    override displayName() {
        console.log('manager class');
    }
}

Template string type improvements

Template string types can create new string types by combining pattern or matching other string types,

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

ECMAScript #Private class members

Typescript 4.3 allows you to make properties, methods, and access methods private to restrict access to these fields outside the class. We can make the fields with "#" private. In the example below, we set the #validateName() method to private, they set the read access of #getId() to private, which limits the use of these fields outside the class and causes errors, but they can be used in Access within the class.

class Employee {
    #validateName() {
        //...
    }
    get #getId() {
        return 10;
    }
    displayName() {
        // This works, because we can access private fields inside the class.
        this.#validateName();
        return this.#getId;
    }
}
new Employee().#validateName();
// error!
// Property '#validateName' is not accessible
// outside class 'Employee ' because it has a private identifier.
new Employee().#getId;
// error!
// Property '#getId' is not accessible
// outside class 'Employee ' because it has a private identifier.

ConstructorParameters apply to abstract classes

ConstructorParameters can now be added to abstract classes and can be used after Typescript 4.3 is released. Here a small example that showcases abstract class

abstract class Employee {
   constructor(name: string, id: number) {
}

A few things in TypeScript 4.3 also improve its type reduction logic for generic values ​​and fixes some scenarios where TypeScript errors are incorrect. At some important points in writing code, the type system is concerned with restricting a type. TypeScript takes the constrained type out of the constraint to give you the data that interests you.

Some of the following improvements are as follows,

  • Template string type improvements
  • Always-truthy promise checks
  • static index signatures
  • Smaller .tsbuildinfo files and faster builds
  • More efficient compilation
  • Import statement autocomplete
  • Support for @link tags

Some breaking changes need to be check while upgrading to typescript4.3

The built-in lib.d.ts now leverage Mozilla’s browser-compat-data to remove APIs that no browser implements.

  • Errors on always-truthy promise checks
  • Union enums cannot be compared to arbitrary numbers

Thanks For Reading :)


Similar Articles