Class And Constructor In TypeScript Using Visual Studio Code

Introduction

This is a fresh series of articles to learn TypeScript from scratch, using Visual Studio Code. Visual Studio Code is a new editor, which is given by Microsoft. It’s a very rich tool in comparison to Sublime Text and others, and this is my personal observation.

I hope you have gone through the last articles. To quickly start with Typescript, click here.

Classes

Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components, but this may feel a bit awkward to the programmers who are more comfortable with an object-oriented approach, where the classes inherit the functionality and the objects are built from these classes. Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using an object-oriented class-based approach. In TypeScript, we allow the developers to use these techniques now and compile them down to JavaScript, which works across all the major Browsers and platforms without having to wait for the next version of JavaScript.

After keeping the above excerpt, I have created a class with the code segment given below.

class DotnetPiper {
private NameValue: string = null;
private BloggerName: string = null;
constructor(public name ? : string, public age ? : Number) {
this.BloggerName = name;
}
public get GetName(): string {
return "Blogger name " + this.BloggerName + " coming from Class constructor :";
}
public set SetName(value: string) {
this.NameValue = value;
}
}
var obj = new DotnetPiper("Sachin Kalia", 31);
console.log(obj.GetName);

Constructor

In TypeScript, the constructor is only defined with the “constructor” name, as defined in the code given above as well in the depicted image given below.

The second most important factor, which should be remembered during the development phase, is that you are not allowed to create multiple constructors. Instead, you can call the constructor without the parameter after defining the optional parameters within the constructor, which is also shown in the image given below, which also prompts an error, as soon as you create another constructor within the same class DotnetPiper.

TypeScript permits you to declare overloads but with one implementation and that implementation must have a signature, which is compatible with all the overloads, as I mentioned in the constructor given above.

There are other ways also to create a class instance in TypeScript and call the respective class members. The statement given above may be easy for those who are familiar with object oriented languages.

let dotnetPiperObj: DotnetPiper;
dotnetPiperObj = new DotnetPiper("By [email protected] ");
console.log("THis is almost second type of implementation to call Constructor :" + dotnetPiperObj.GetName);

There is another way to call static properties, using let keyword, which is given below.

let anotherDotnetPiperObj: typeof DotnetPiper = DotnetPiper;
anotherDotnetPiperObj.WelcomeMessage = "Hey Sachin Kalia!";

This is how you can access the static properties of the class in TypeScript.

Point to remember- As soon as you type something within VS code, Node.JS converts TypeScript language to JavaScript, so if I consider myApp.ts file, it gets converted into myApp.js file, which looks quite messy but JavaScript core developers would like it.

A glimpse of the file, which has class definition and constructor is given below.

I hope, it will help you somewhere. I’ll attach a sample application for your reference.