TypeScript Classes and Objects

Introduction

In this chapter, we will explore classes and objects in TypeScript. Classes are blueprints for creating objects, and objects are instances of classes. Understanding how to define and use classes and objects is essential for writing modular, reusable, and maintainable TypeScript programs.

Table of Contents

• Definition
• Creating a Class
• Creating an Object
• Constructors
• Properties
• Methods
• Access Modifiers
• Static Properties and Methods
• Complete Example with Output
• Conclusion

Definition

A class in TypeScript is a blueprint for creating objects. It defines properties and methods that the objects created from the class will have. An object is an instance of a class, containing data and methods to manipulate that data.

Creating a Class

Syntax

class ClassName {
  // properties
  // methods
}

Example

This example demonstrates how to define a class named Person.

class Person {
  name: string;
  age: number;
}

Creating an Object

An object is created from a class using the new keyword.

Example

This example demonstrates how to create an object from the Person class.

let person = new Person();
person.name = "Ramesh";
person.age = 25;
console.log(person);

Output

{ name: 'Ramesh', age: 25 }

Constructors

A constructor is a special method in a class that is called when an object of the class is instantiated. It is used to initialize the object's properties.

Example

This example demonstrates a class with a constructor to initialize its properties.

class Person {
  name: string;
  age: number;

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

let person = new Person("Ramesh", 25);
console.log(person);

Output

{ name: 'Ramesh', age: 25 }

Properties

Properties are variables that belong to a class. They define the attributes of the objects created from the class.

Example

This example demonstrates how to define and use properties in a class.

class Car {
  model: string;
  year: number;

  constructor(model: string, year: number) {
    this.model = model;
    this.year = year;
  }

  display(): string {
    return `This car is a ${this.model} from ${this.year}.`;
  }
}

let car = new Car("Toyota", 2020);
console.log(car.display()); // Output: This car is a Toyota from 2020.

Output

This car is a Toyota from 2020.

Methods

Methods are functions that belong to a class and define its behavior.

Example

This example demonstrates how to define and use methods in a class.

class Book {
  title: string;
  author: string;

  constructor(title: string, author: string) {
    this.title = title;
    this.author = author;
  }

  getSummary(): string {
    return `${this.title} is written by ${this.author}.`;
  }
}

let book = new Book("TypeScript Basics", "John Doe");
console.log(book.getSummary()); // Output: TypeScript Basics is written by John Doe.

Output

TypeScript Basics is written by John Doe.

Access Modifiers

Access modifiers in TypeScript define the visibility of class properties and methods. The three main access modifiers are public, private, and protected.

Example

This example demonstrates the use of access modifiers in a class.

class Employee {
  public name: string;
  private salary: number;
  protected department: string;

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  getDetails(): string {
    return `Name: ${this.name}, Department: ${this.department}`;
  }
}

let employee = new Employee("Suresh", 50000, "HR");
console.log(employee.getDetails()); // Output: Name: Suresh, Department: HR

Output

Name: Suresh, Department: HR

Static Properties and Methods

Static properties and methods belong to the class itself rather than instances of the class. They are defined using the static keyword.

Example

This example demonstrates the use of static properties and methods in a class.

class MathUtil {
  static PI: number = 3.14;

  static calculateArea(radius: number): number {
    return this.PI * radius * radius;
  }
}

console.log(MathUtil.PI); // Output: 3.14
console.log(MathUtil.calculateArea(5)); // Output: 78.5

Output

3.14
78.5

Complete Example with Output

In this section, we will combine 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 a Class and Object
class Person {
  name: string;
  age: number;

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

  greet(): string {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

let person = new Person("Ramesh", 25);
console.log(person.greet()); // Output: Hello, my name is Ramesh and I am 25 years old.

// Properties and Methods
class Car {
  model: string;
  year: number;

  constructor(model: string, year: number) {
    this.model = model;
    this.year = year;
  }

  display(): string {
    return `This car is a ${this.model} from ${this.year}.`;
  }
}

let car = new Car("Toyota", 2020);
console.log(car.display()); // Output: This car is a Toyota from 2020.

// Access Modifiers
class Employee {
  public name: string;
  private salary: number;
  protected department: string;

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  getDetails(): string {
    return `Name: ${this.name}, Department: ${this.department}`;
  }
}

let employee = new Employee("Suresh", 50000, "HR");
console.log(employee.getDetails()); // Output: Name: Suresh, Department: HR

// Static Properties and Methods
class MathUtil {
  static PI: number = 3.14;

  static calculateArea(radius: number): number {
    return this.PI * radius * radius;
  }
}

console.log(MathUtil.PI); // Output: 3.14
console.log(MathUtil.calculateArea(5)); // Output: 78.5

Conclusion

In this chapter, we covered classes and objects in TypeScript, including how to create classes and objects, use constructors, define properties and methods, apply access modifiers, and use static properties and methods. We provided a complete example with its output to illustrate how these concepts work in TypeScript. Understanding classes and objects is essential for writing modular, reusable, and maintainable TypeScript programs.