TypeScript object Type

Introduction

In this chapter, we will explore the object type in TypeScript. The object type is used to represent non-primitive types, which are instances of classes, arrays, functions, or plain objects. Understanding how to work with objects is essential for managing and manipulating structured data in your TypeScript programs.

Table of Contents

• Definition
• Object Syntax
• Creating and Accessing Object Properties
• Methods in Objects
• Nested Objects
• Type Inference with Objects
• Complete Example with Output
• Conclusion

Definition

In TypeScript, the object type represents any value that is not a primitive type (string, number, boolean, symbol, null, or undefined). This includes arrays, functions, classes, and plain objects. Objects are used to store collections of data and more complex entities.

It is important to note the difference between object and Object in TypeScript:

• The object type represents all non-primitive values.
• The Object type describes the functionality of all objects and includes methods like toString() and valueOf().

In this chapter, we will focus on the object type.

Object Syntax

Syntax

let variableName: { property1: type1, property2: type2, ... } = {
  property1: value1,
  property2: value2,
  ...
};

Example

let person: { name: string, age: number } = {
  name: "Ramesh",
  age: 25
};
console.log(person);

Output

{ name: 'Ramesh', age: 25 }

Creating and Accessing Object Properties

You can create objects with properties and access those properties using dot notation or bracket notation.

Example

let person: { name: string, age: number } = {
  name: "Ramesh",
  age: 25
};

// Accessing properties
console.log(person.name); // Output: Ramesh
console.log(person["age"]); // Output: 25

// Adding properties
person.email = "ramesh@example.com";
console.log(person.email); // Output: ramesh@example.com

Output

Ramesh
25
ramesh@example.com

Methods in Objects

Objects can also have methods, which are functions stored as object properties.

Example

let person: { name: string, age: number, greet: () => string } = {
  name: "Ramesh",
  age: 25,
  greet: function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
};

console.log(person.greet());

Output

Hello, my name is Ramesh and I am 25 years old.

Nested Objects

Objects can contain other objects as properties, allowing for complex data structures.

Example

let person: { name: string, age: number, address: { street: string, city: string } } = {
  name: "Ramesh",
  age: 25,
  address: {
    street: "123 Main St",
    city: "Mumbai"
  }
};

console.log(person);
console.log(person.address.street); // Output: 123 Main St
console.log(person.address.city); // Output: Mumbai

Output

{
  name: 'Ramesh',
  age: 25,
  address: { street: '123 Main St', city: 'Mumbai' }
}
123 Main St
Mumbai

Type Inference with Objects

TypeScript can infer the types of object properties based on their initial values. This allows you to omit explicit type annotations in many cases.

Example

let person = {
  name: "Ramesh",
  age: 25
};

// TypeScript infers the type of 'person' as { name: string; age: number; }
console.log(person.name); // Output: Ramesh
console.log(person.age); // Output: 25

Output

Ramesh
25

Complete Example with Output

In this section, we will combine all the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground:

// Creating and Accessing Object Properties
let person: { name: string, age: number, email?: string } = {
  name: "Ramesh",
  age: 25
};

// Accessing properties
console.log(person.name); // Output: Ramesh
console.log(person["age"]); // Output: 25

// Adding properties
person.email = "ramesh@example.com";
console.log(person.email); // Output: ramesh@example.com

// Methods in Objects
let personWithMethods: { name: string, age: number, greet: () => string } = {
  name: "Ramesh",
  age: 25,
  greet: function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
};

console.log(personWithMethods.greet()); // Output: Hello, my name is Ramesh and I am 25 years old.

// Nested Objects
let personWithAddress: { name: string, age: number, address: { street: string, city: string } } = {
  name: "Ramesh",
  age: 25,
  address: {
    street: "123 Main St",
    city: "Mumbai"
  }
};

console.log(personWithAddress);
console.log(personWithAddress.address.street); // Output: 123 Main St
console.log(personWithAddress.address.city); // Output: Mumbai

// Type Inference with Objects
let inferredPerson = {
  name: "Ramesh",
  age: 25
};

// TypeScript infers the type of 'inferredPerson' as { name: string; age: number; }
console.log(inferredPerson.name); // Output: Ramesh
console.log(inferredPerson.age); // Output: 25

Conclusion

In this chapter, we covered the object type in TypeScript, including how to create and access object properties, define methods in objects, work with nested objects, and understand type inference with objects. We provided a complete example with its output to illustrate how objects work in TypeScript.