How to create objects in TypeScript?

The object contains the key-value pairs of its properties, or it can be an instance of the class in TypeScript. The class and its objects are the base of object-oriented programming. So, without an object, OOPS doesn’t exist. Mainly, objects are used to invoke the non-static methods of the class.

There are multiple ways to define the objects in TypeScript. We will learn all ways to define objects one by one below.

Use The Object Literal Notation to Create Objects

The object-literal notation means we can create the object using the two curly braces. By comma separation, we need to define the key-value pairs of the object properties inside the curly braces.

Syntax

The below syntax shows how to define the object and insert the properties using the object-literal notation.

let object = {
   key1: Value1,
   key2: value2,
}

Example 1

In the example below, we have created the interface Employee, which we will use to define the type of employee objects. The Employee interface contains the emp_name, department, and joining_date total of 3 properties.

After that, we created the emp object of type Employee containing the different property values. At last, we have printed the property values of the emp object.

// Employee interface to define the object type
interface Employee {
   emp_name: string;
   department: string;
   joining_date: Date;
}
// Creating an object of the Employee type
let emp: Employee = {
   emp_name: "Shubham",
   department: "Writing",
   joining_date: new Date(),
};
// Printing the object information
console.log(
   "The joining date of the " +
   emp.emp_name +
   " into the " +
   emp.department +
   " department is " +
   emp.joining_date
)

On compiling, it will generate the following JavaScript code −

// Creating an object of the Employee type
var emp = {
   emp_name: "Shubham",
   department: "Writing",
   joining_date: new Date()
};
// Printing the object information
console.log("The joining date of the " +
emp.emp_name +
" into the " +
emp.department +
" department is " +
emp.joining_date);

Output

The above code will produce the following output −

The joining date of the Shubham into the Writing department is Sun Dec 25 2022 09:01:09
GMT+0000 (UTC)

Example 2

In the example below, we have created the interface car, which contains some car properties such as model and color. The object_func() function takes the car object as a parameter and returns the car information.

After that, we executed the object_func() function by passing the anonymous object of the Car type as an argument.

// Type declaration for the Car object
interface Car {
   model: string;
   color: string;
   model_year: number;
}
// function whic returns the car info
function object_func(car: Car): string {
   return "The " + car.model + " is developed in the year " + car.model_year;
}
// Calling the object_func with anonymous object of the Car type
console.log(object_func({ model: "Verna SX", color: "black", model_year: 2016 }));

On compiling, it will generate the following JavaScript code −

// function whic returns the car info
function object_func(car) {
   return "The " + car.model + " is developed in the year " + car.model_year;
}
// Calling the object_func with anonymous object of the Car type
console.log(object_func({ model: "Verna SX", color: "black", model_year: 2016 }));

Output

The above code will produce the following output −

The Verna SX is developed in the year 2016

Use the Constructor to Define the Objects

The constructor is one kind of class or object method which always invokes at first when we create an object. The constructor takes a value as a parameter, and we can use that parameter value to initialize the object or class properties.

Syntax

Users can follow the syntax below to define the object of the Number class. Also, we have passed value as an argument of the constructor

let number_obj = new Number(value);

In the above syntax, we have used the arrow function as a callback function.

Example 1

The below example contains the table class. Inside the table class, we defined the color and size properties for the table. Also, we created the constructor for the table class using the constructor keyword, which takes table_color and table_size as a parameter. The constructor will call every time we create an object of the table class and initialize the table and size properties of the table class.

After that, we created the table1 object using the table class constructor and passed the color and size for the table as an argument. In the output, users can see that value of the properties of the table1 object is changed.

// Creating the table class
class table {
   // defining the properties of the table class with default values
   color: string = "black";
   size: string = "19 x 19 inches";
   
   // constructor of the table class
   constructor(table_color: string, table_size: string) {
      this.color = table_color;
      this.size = table_size;
   }
}
// creating the object of the table class with constructor arguments
let table1 = new table("white", "4 x 4 feet");

// printing the information of the table1 object
console.log("The color of table1 is " + table1.color);
console.log("The size of the table1 is " + table1.size);

On compiling, it will generate the following JavaScript code −

// Creating the table class
var table = /** @class */ (function () {

   // constructor of the table class
   function table(table_color, table_size) {
   
      // defining the properties of the table class with default values
      this.color = "black";
      this.size = "19 x 19 inches";
      this.color = table_color;
      this.size = table_size;
   }
   return table;
}());
// creating the object of the table class with constructor arguments
var table1 = new table("white", "4 x 4 feet");

// printing the information of the table1 object
console.log("The color of table1 is " + table1.color);
console.log("The size of the table1 is " + table1.size);

Output

The above code will produce the following output −

The color of table1 is white
The size of the table1 is 4 x 4 feet

Example 2

In the example below, we have defined the function name constructor. It takes the string value as a first parameter, number value as a second parameter, and function as a third parameter and assigns those values to its properties which are property1, property2, and property3.

In TypeScript, we can use any function as a constructor and create its object instance. Here, we have used the constructor() function as a constructor to create a new_object. After that, we invoked the property3() function of the new_object.

// Define the constructor function
function constructor(value1: string, value2: number, value3: Function) {
   this.property1 = value1;
   this.property2 = value2;
   // It takes the function as a value
   this.property3 = value3;
}
// Creating the new object by passing arguments to constructor,

// Third argument is the function.
let new_object = new constructor("shubham", 22, () => {
   return "Hello World";
});
console.log("The property1 value of the new object is " + new_object.property1);
console.log(
"Invoking the function of the property3, " + new_object.property3()
);

On compiling, it will generate the following JavaScript code −

// Defininf the constructor function
function constructor(value1, value2, value3) {
   this.property1 = value1;
   this.property2 = value2;
   
   // It takes the function as a value
   this.property3 = value3;
}
// Creating the new object by passing arguments to constructor,

// Third argument is the function.
var new_object = new constructor("shubham", 22, function () {
   return "Hello World";
});
console.log("The property1 value of the new object is " + new_object.property1);
console.log("Invoking the function of the property3, " + new_object.property3());

Output

The above code will produce the following output −

The property1 value of the new object is shubham
Invoking the function of the property3, Hello World

Use the Object.create() Method to Clone the Existing Object

In TypeScript, we can clone the existing object using the Object.create() method.

Syntax

In the below syntax, we have cloned the obj method using the Object.create() method and defined the clone_obj.

let obj = {
   message: "Hello Users!",
};
let clone_obj = Object.create(obj);

Here Obj is an object from which we want to create clone.

Example

We have created the obj object containing some properties in the example below. After that, we used the Object.create() method to clone all the properties of the obj object to clone_obj. In the output, users can observe that clone_obj contains the same properties and their value as obj.

// Creating the object with key-value pairs
let obj = {
   message: "Hello Users!",
   property1: "TutorialsPoint",
   Property2: 90
};

// cloning the obj using the Object.create() method
let clone_obj = Object.create(obj);
console.log(
   "Printing the information of the clone_obj is " +
   clone_obj.message +
   " " +
   clone_obj.property1
);

On compiling, it will generate the following JavaScript code −

// Creating the object with key-value pairs
var obj = {
   message: "Hello Users!",
   property1: "TutorialsPoint",
   Property2: 90
};

// cloning the obj using the Object.create() method
var clone_obj = Object.create(obj);
console.log("Printing the information of the clone_obj is " +
clone_obj.message + " " +
clone_obj.property1);

Output

The above code will produce the following output −

Printing the information of the clone_obj is Hello Users! TutorialsPoint

We learned two different ways to create objects in TypeScript. Users can use the object literal notation or constructor notation depending on the situation they need to create an object.