Constructors In TypeScript 2.0

Introduction

 

Most of the people from OOP languages, like C# or Java, must be aware of constructors but the people from JavaScript background might have never heard of this term. To put it in simple terms, “a constructor is a function which is called to create an object of the class, in which it is defined. It prepares a new object, for which often accepting arguments is used to set the required variables of the class”.

 

But in TypeScript, unlike any other object-oriented language, only one constructor is allowed.

 

Types with explanation

 

1) Simple parameterized constructor 

 

constructor(argument1 : <type of argument>, argument2 : <type of argument>) { }

 

Example

class test {
 constructor(inputName: string, inputAge: number) {
  this.name = inputName;
  this.age = inputAge;
 }
 name: string;
 age: number;
 IsFemale: boolean;
 Address: string;
}

In the above example, I have created a class named "test". It has 4 members like name, age, IsFemale, Address.

 

I have created a constructor to initialize the object for the test class. It takes 2 arguments, the first one of type string and the second one of type number.

 

After compiling the above code, we will get the following JavaScript code.

var test = (function() {
 function test(inputName, inputAge) {
  this.name = inputName;
  this.age = inputAge;
 }
 return test;
}());

This is an IIFE. As you can see, it returns the same function object as the output of IIFE.

 

Let's call the constructor to create an object of "test" class and print the members.

var tests = new test("abc", 25);
console.log(tests.name);
console.log(tests.age);
console.log(tests.IsFemale);
console.log(tests.Address);

and the output for the same is given below.

 

abc
25
undefined
undefined

 

As the constructor is initializing only 2 members, the other 2 are undefined (you can see the JavaScript code). If we try to create the object of the test without passing a parameter or with wrong parameters, then it throws an error in TypeScript.

 

2) constructor with Optional parameter

 

constructor(argument1 : <type of argument>, argument2 : <type of argument>, argument3 ? : <type of argument>) { }

 

Like any object-oriented language, you can have an optional argument in a constructor in TypeScript also. The ? keyword is used in the argument to make it optional for the constructor. All the optional arguments of a constructor should be placed after all the mandatory arguments only in a constructor.

 

Example

class test {
 constructor(inputName: string, inputAge: number, address ? : string) {
  this.name = inputName;
  this.age = inputAge;
  this.Address = address;
 }
 name: string;
 age: number;
 IsFemale: boolean;
 Address: string | undefined;
}

In the above code, the address is an optional argument. So, if in the constructor, the address is not passed, then it is assumed to be undefined by JavaScript. If you have to initialize a member of the class using the optional parameter, then it needs to be accepting Undefined also. It can be achieved by,

 

Address: string|undefined;

 

“|” (pipe symbol) is used to define a variable to accept the undefined value.

 

The JavaScript code of the above constructor after compilation will be like below.

var test = (function() {
 function test(inputName, inputAge, address) {
  this.name = inputName;
  this.age = inputAge;
  this.Address = address;
 }
 return test;
}());

Let’s test the above constructor.

console.log(tests.name);
console.log(tests.age);
console.log(tests.IsFemale);
console.log(tests.Address);
var testsWithAddress = new test("abc", 25, "this is my address");
console.log(testsWithAddress.name);
console.log(testsWithAddress.age);
console.log(testsWithAddress.IsFemale);
console.log(testsWithAddress.Address);

Output

 

abc
25
undefined
undefined
abc
25
undefined
this is my address

 

Here, you can see that if the address is passed in the constructor of the class, then it gets initialized with the same value, else with Undefined.

 

3) Constructor with default argument value

 

You can define an argument with default value also for a constructor. If no value is passed for the same argument, then the default value is assigned to the argument.

 

constructor(argument1 : <type of argument>, argument2 : <type of argument> = default value) { }

 

Example

class test {
 constructor(inputName: string, inputAge: number, isFemale: boolean = false, address ? : string) {
  this.name = inputName;
  this.age = inputAge;
  this.Address = address;
  this.IsFemale = isFemale;
 }
 name: string;
 age: number;
 IsFemale: boolean;
 Address: string | undefined;
}

In the above code, you can see that isFemale argument is having a default value of false in the constructor. So, if no value is passed for the isFemale argument, then it will be by default false, in this example.

 

Let’s see the JavaScript code after compilation.

var test = (function() {
 function test(inputName, inputAge, isFemale, address) {
  if (isFemale === void 0) {
   isFemale = false;
  }
  this.name = inputName;
  this.age = inputAge;
  this.Address = address;
  this.IsFemale = isFemale;
 }
 return test;
}());

If we will create an object of the class and check the output.

var tests = new test("abc", 25);
console.log(tests.name);
console.log(tests.age);
console.log(tests.IsFemale);
console.log(tests.Address);
var testsWithAddress = new test("abc", 25, true, "this is my address");
console.log(testsWithAddress.name);
console.log(testsWithAddress.age);
console.log(testsWithAddress.IsFemale);
console.log(testsWithAddress.Address);

Output

 

abc
25
false
undefined
abc
25
true
this is my address

 

Conclusion

 

This article discussed constructors in TypeScript. If you are new to TypeScript 2.0 then please check the Hello World With TypeScript.

 

Happy Coding!!