Categories: TypeScript

What is object and How to Declare object of a class in TypeScript?

Introduction:

In this tutorial I am going to give you details about how you can declare object of a class in typescript.

If you followed my earlier tutorials on typescript you will see that we have covered most of the basic learning essentials on typescript and and this tutorial series is mostly dedicated to the beginner developer.

If you have not seen typescript tutorials here is the list:

If you are absolute beginner on typescript I would recommend to you to please go over and read those tutorial to get core learning on typescript.

What is Object of a Class in typescript?

Object is basically instance of class, by using object we can assess all the available properties, functions of a class.

Object is an Instance of class

So let’s say you have class called a User and it has method likes profile so to call the profile method of that particular user class you have to use object.

let’s see the above example in an action in next step

How to declare Object of class in typescript?

In typescript to declare or create a object of a class we use new keyword.

So to give you an example of creating object, first let’s create a simple user class:

Example of typescript class:

class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  profile() {
    console.log(`User name: ${this.name}`);
  }
}

Now on the next line you can create object like showing below:

Example of creating object:

let user = new User('Yogesh Koli');

user.profile();

As you can in the above script we are calling profile() method using object of class and the dot operator similarly you can call the method of the class for example:

user.name = "test";

If your following me along then you might notice while creating an object of class the editor given us very nice tool tip regarding required definition of a class.

Example of creating objet of a class in typescript

On the next line you also notice we can see the list of available properties and method from the class.

Object is showing class properties and method to access and use.png

Now let’s compile our typescript code in to javascript using typescript compiler and let’s see how this class object code looks in to the javascript.

Use following command to compiler your code:

tsc main.ts
Compile typescript code

Here is how our javascript code look like after compiling from typescript:

var User = /** @class */ (function () {
    function User(name) {
        this.name = name;
    }
    User.prototype.profile = function () {
        console.log("User name: " + this.name);
    };
    return User;
}());
var user = new User('Yogesh Koli');
user.profile();

What do you think? huh! tricky code right I mean it is tricky to write and memorise, compare it with the one we have in typescript.

Thant why I told you typescript is very beautiful language it is powerful and easy to learn.

Conclusion:

So you have learn here that how we can create object of class and how you can access the properties or methods of the class.

I want give you a quick hint here, in typescript we can write a class in external file and import it anywhere in your project and that will be most important concept and this how we build application using typescript inside Angular or React.

Learn More

Next let’s learn – What is constructor function in Typescript?

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago