Constructor in TypeScript

A constructor is a special function of the class that is automatically invoked when we create an instance of the class in Typescript. We use it to initialize the properties of the current instance of the class. Using the constructor parameter properties or Parameter shorthand syntax, we can add new properties to the class. We can also create multiple constructors using the technique of constructor method overload.

Creating a Class Constructor

The constructor method in a class must have the name constructor. A class can have only one implementation of the constructor method. The constructor method is invoked every time we create an instance from the class using the new operator. It always returns the newly created object.

The following is an empty Person class with the method constructor. The constructor method prints Constructor is called. As you can see every time we execute the statement new Person() the message is printed on the console.

The constructor method creates the instance of the object with the property defined in the class. We can access the current instance using the ‘this‘ inside the constructor. Once finished constructor function returns the new object.

Parameters to the Constructor method

Constructors are just like normal functions in the way that they also accept parameters. We need to pass parameter values when we create a new class instance.

The constructor function in the following example accepts two arguments. We use the ‘this‘ keyword to get the current instance of the class and initialize its properties using those parameters.

We create an instance from the class by invoking the new operator on the Person class. In the argument, we will pass values for fName & lName arguments. The new Person will invoke the constructor function associated with the class Person along with the arguments.

The parameter in the constructor is not optional here. This means that when you instantiate the class, you must pass the values of all arguments to the constructor. If you do not pass all parameters, then it will result in a compiler error.

In the following example, we have added a few console.log statements in the constructor method to display the value of ‘this‘ property after each statement.

Constructor Parameter Properties

Constructor Parameter Properties (or Property Shorthand syntax) offers a special shorthand syntax to convert parameters of constructor function into properties. We can do this by prefixing a constructor parameter with one of the visibility modifiers ( i.e. public, private, protected, or readonly). The resulting field gets those modifier(s)

In this example, we have created the firstName & lastName fields manually

Instead, we can prefix the constructor parameters with the public modifier. Typescript automatically creates the properties for us

Passing Default Values in the Constructor method

We can also pass the default value to the constructor method. In this example x & y properties are initialized with the 10 & 20 if we do not pass any values while creating the new instance

Constructor functions in the derived class

The derived class must call the constructor of the parent class (base class). We do this by invoking the super method. We must call the super method before we use ‘this‘ variable.

In this example, the Employee class extends the Person class and adds its own property designation. Here Employee class must invoke the constructor of the Person class. To do that we use the super function. The super function needs to be invoked with the parameters of the Person constructor.

Call the super method before accessing ‘this’ or before we return from the derived constructor. Trying to access the variable ‘this’ will result in both compile-time and run-time errors ( “‘super’ must be called before accessing ‘this’ in the constructor of a derived class“).

Not invoking the super call in the derived class will also result in a compiler error “Constructors for derived classes must contain a ‘super’ call

Class without constructor

You can create a class without a constructor method. In such cases, JavaScript (not TypeScript) automatically uses a default constructor.

The default constructor is an empty constructor.

But if the class is a derived class then the default constructor is as shown below

Multiple Constructor methods

A class can have only one implementation of the constructor method. Having more than one constructor function will result in an error. You cannot use the name constructor in a getter or setter method.

But we can take advantage of function overload to create multiple overload signatures of the constructor function.

In this example, the person class has only one property i.e. name. We would like to create the instance of the class either with a name or with a firstName & lastName.

To do that, first, we need to create two constructor function signatures (overload signatures) one for each use case. Then an actual constructor function (implementation function) where you write the implementation

Note that a parameter property is only allowed in a constructor implementation. For example, prefixing the public modifier to the name property in the constructor function signature results in a compiler error.

You can prefix the public modifier to the name property only in the constructor implementation function.

You can refer to function or method overloading in TypeScript for more

Leave a Comment

Your email address will not be published.

Scroll to Top