TypeScript class

A class in TypeScript is a blueprint for creating objects. It encapsulates properties (data) and methods (behavior) into a single unit, making code more organized, reusable, and readable.

• Supports inheritance, allowing a class to reuse functionality from another class.
• Provides access modifiers such as public, private, and protected to control member accessibility.
• Uses constructors to initialize object properties when an instance is created.

class Person {
  name: string;
  age: number;

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

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

const person1 = new Person("Alen", 25);
console.log(person1.introduce());

Output:

Hi, my name is Alen and I am 25 years old.

• Person is the class.
• name and age are properties of the class.
• constructor() initializes these properties.
• introduce() is a method that returns a greeting.
• person1 is an object (instance) created using the Person class.
• new Person("Alen", 25) creates a new instance and calls the constructor.

Components of TypeScript Classes

Here are some components:

Properties

Properties store data associated with an object.

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

Here, name and age are properties of the Person class.

Methods

Methods are functions defined inside a class that describe the behavior of its objects.

class Person {
  greet(): void {
    console.log("Hello!");
  }
}

The greet() method defines an action that a Person object can perform.

Constructors

A constructor is a special method that is automatically called when an object is created. It is commonly used to initialize class properties.

class Person {
  constructor(public name: string, public age: number) {}
}

const person = new Person("Ryan", 20);

console.log(`Name: ${person.name}, Age: ${person.age}`);

Output:

Name: Ryan, Age: 20

TypeScript also supports parameter properties, where access modifiers such as public can be added directly to constructor parameters. This automatically creates and initializes the corresponding class properties.

Access Modifiers

Access modifiers control where class properties and methods can be accessed.

• public: Accessible from anywhere
• private: Accessible only within the class
• protected: Accessible within the class and its subclasses

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;
  }

  getSalary(): number {
    return this.salary;
  }
}

const employee = new Employee("Rahul", 50000, "IT");

console.log(employee.name);        // Accessible
console.log(employee.getSalary()); // Accessible
// console.log(employee.salary);   // Error: private property

Output:

Rahul
50000

• name can be accessed from anywhere because it is public.
• salary can only be accessed inside the Employee class because it is private.
• department can be accessed inside Employee and its subclasses because it is protected.

Inheritance

TypeScript classes support inheritance, which allows one class to reuse and extend the properties and methods of another class using the extends keyword.

class Animal {
  name: string;

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

  makeSound(): void {
    console.log("Animal makes a sound");
  }
}

class Dog extends Animal {
  bark(): void {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Bruno");

dog.makeSound();
dog.bark();

Output:

Animal makes a sound
Bruno barks

Here, Dog inherits the name property and makeSound() method from the Animal class and adds its own bark() method.

More Examples of TypeScript Classes

Here are some examples:

Managing a Bank Account

class BankAccount {
  accountHolder: string;
  balance: number;

  constructor(accountHolder: string, initialBalance: number) {
    this.accountHolder = accountHolder;
    this.balance = initialBalance;
  }

  deposit(amount: number): void {
    this.balance += amount;
  }

  getBalance(): string {
    return `The balance for ${this.accountHolder} is $${this.balance}`;
  }
}

const account = new BankAccount("John Doe", 500);

account.deposit(200);

console.log(account.getBalance());

Output:

The balance for John Doe is $700

• BankAccount represents a bank account.
• deposit() adds money to the account balance.
• getBalance() returns the updated balance.

Representing a Rectangle

class Rectangle {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  calculateArea(): number {
    return this.width * this.height;
  }
}

const rect = new Rectangle(10, 5);

console.log(`Area of the rectangle: ${rect.calculateArea()}`);

Output:

Area of the rectangle: 50

The Rectangle class stores the width and height of a rectangle and uses the calculateArea() method to calculate its area.