Overview

TypeScript classes are a foundational feature of the TypeScript language that offer developers a way to create structured and reusable code. Classes allow programmers to model real-world entities, encapsulating both data and behaviors in a single construct. This leads to improved organization and clarity in codebases, making it easier to manage complex applications.

The concept of classes is rooted in Object-Oriented Programming (OOP), which revolves around four primary principles: encapsulation, inheritance, abstraction, and polymorphism. TypeScript enhances JavaScript's prototypal inheritance by introducing a class-based syntax, which is more familiar to developers coming from traditional OOP languages like Java or C#. This bridge between OOP concepts and JavaScript's flexible nature solves issues around code maintainability and readability, especially in large-scale applications.

Real-world use cases of TypeScript classes include modeling entities in a business application (such as users, products, or orders), creating reusable components in web development frameworks like Angular, and developing libraries that require clear interfaces and implementations. By leveraging TypeScript's static typing along with class structures, developers can achieve higher reliability in their code.

Prerequisites

• JavaScript Basics: Understanding of JavaScript syntax and fundamental programming concepts.
• TypeScript Fundamentals: Familiarity with TypeScript types, interfaces, and basic syntax.
• OOP Concepts: Basic knowledge of object-oriented programming principles like encapsulation and inheritance.

Understanding Classes in TypeScript

A class in TypeScript is a blueprint for creating objects with predefined properties and methods. Classes can include fields (properties) and methods (functions) that define the behavior of the objects created from them. The class definition uses the class keyword followed by the class name, and its body contains the properties and methods.

class Car {
  make: string;
  model: string;
  year: number;

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

  displayInfo(): string {
    return `${this.year} ${this.make} ${this.model}`;
  }
}

const myCar = new Car('Toyota', 'Camry', 2021);
console.log(myCar.displayInfo()); // Output: 2021 Toyota Camry

The Car class contains three properties: make, model, and year. The constructor method initializes these properties when a new instance of the class is created. The displayInfo method concatenates the car's information into a readable string. When we create an instance of Car and call displayInfo, it outputs the formatted car details.

Constructor and Initialization

In TypeScript, the constructor method is a special function that is invoked when an instance of a class is created. It can take parameters that are used to set initial values for the class properties. This allows for more flexible and dynamic object creation.

class Person {
  name: string;
  age: number;

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

const person1 = new Person('Alice', 30);
console.log(person1); // Output: Person { name: 'Alice', age: 30 }

This Person class has a constructor that initializes the name and age properties. When an instance is created with new Person('Alice', 30), the properties are set accordingly.

Inheritance in TypeScript

Inheritance is a core principle of OOP that allows a class to inherit properties and methods from another class, promoting code reusability and establishing a hierarchy. In TypeScript, inheritance is implemented using the extends keyword.

class Vehicle {
  wheels: number;

  constructor(wheels: number) {
    this.wheels = wheels;
  }

  displayWheels(): string {
    return `This vehicle has ${this.wheels} wheels.`;
  }
}

class Motorcycle extends Vehicle {
  constructor() {
    super(2);
  }
}

const bike = new Motorcycle();
console.log(bike.displayWheels()); // Output: This vehicle has 2 wheels.

The Motorcycle class extends the Vehicle class, inheriting its properties and methods. The super() function is called in the constructor of Motorcycle to initialize the inherited property wheels. When we create an instance of Motorcycle and call displayWheels, it outputs the number of wheels.

Method Overriding

Method overriding allows a derived class to provide a specific implementation of a method that is already defined in its base class. This is particularly useful when the derived class needs to modify or extend the behavior of inherited methods.

class Animal {
  sound: string;

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

  makeSound(): string {
    return this.sound;
  }
}

class Dog extends Animal {
  constructor() {
    super('Bark');
  }

  makeSound(): string {
    return `${super.makeSound()} Woof!`;
  }
}

const dog = new Dog();
console.log(dog.makeSound()); // Output: Bark Woof!

In this example, the Dog class overrides the makeSound method inherited from the Animal class. It first calls the base class's implementation using super.makeSound() and then appends additional behavior. The final output reflects both the base and overridden functionality.

Encapsulation in TypeScript

Encapsulation is the practice of restricting access to certain components of an object and bundling the data with the methods that operate on it. In TypeScript, this can be achieved using access modifiers: public, protected, and private.

class BankAccount {
  private balance: number;

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

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

  public getBalance(): number {
    return this.balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150

The BankAccount class encapsulates the balance property, making it private. The class provides public methods deposit and getBalance to interact with the private data. This encapsulation ensures that the balance cannot be directly accessed or modified from outside the class, enforcing data integrity.

Access Modifiers

Access modifiers allow developers to control the visibility of class members. The modifiers public, private, and protected dictate how and where properties and methods can be accessed.

class Employee {
  private id: number;
  protected name: string;
  public position: string;

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

class Manager extends Employee {
  constructor(id: number, name: string) {
    super(id, name, 'Manager');
  }

  public getDetails(): string {
    return `ID: ${this.id}, Name: ${this.name}, Position: ${this.position}`;
  }
}

const manager = new Manager(1, 'John');
console.log(manager.getDetails()); // Error: Property 'id' is private and only accessible within class 'Employee'

In this example, the id property is private and cannot be accessed outside the Employee class. The name property is protected, allowing access within derived classes. The output of the getDetails method would result in an error if it attempts to access id directly.

Polymorphism in TypeScript

Polymorphism allows objects of different classes to be treated as objects of a common superclass. It enables a single interface to represent different underlying forms (data types). In TypeScript, polymorphism is achieved through method overriding and interfaces.

interface Shape {
  area(): number;
}

class Rectangle implements Shape {
  constructor(private width: number, private height: number) {}

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

class Circle implements Shape {
  constructor(private radius: number) {}

  area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const shapes: Shape[] = [new Rectangle(10, 5), new Circle(7)];
shapes.forEach(shape => {
  console.log(shape.area()); // Output: 50, 153.93804002589985
});

This example demonstrates polymorphism through the Shape interface, which defines a common method area. Both Rectangle and Circle implement this interface, allowing them to be treated interchangeably in an array of Shape objects. The output displays the area for each shape, showing how polymorphism facilitates code flexibility.

Edge Cases & Gotchas

Common pitfalls when working with TypeScript classes include:

Incorrect Usage of Access Modifiers

class User {
  private password: string;

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

const user = new User('secret');
console.log(user.password); // Error: Property 'password' is private and only accessible within class 'User'

Attempting to access a private property from outside the class results in a compile-time error. Ensure that you interact with private properties through public methods.

Forget to Call super()

class Parent {
  constructor() {
    console.log('Parent constructor');
  }
}

class Child extends Parent {
  constructor() {
    // Missing super() call
    console.log('Child constructor');
  }
}

const child = new Child(); // Error: Cannot call constructor of an abstract class or superclass

Neglecting to call super() in the derived class constructor will lead to an error. Always remember to invoke super() before accessing this.

Performance & Best Practices

To optimize performance and maintainability in TypeScript OOP, consider the following best practices:

• Favor Composition Over Inheritance: Use composition to build complex objects from simpler ones, reducing coupling and enhancing flexibility.
• Limit Class Responsibilities: Adhere to the Single Responsibility Principle (SRP) by ensuring that classes have one primary purpose, making them easier to test and maintain.
• Use Interfaces for Contracts: Define interfaces to specify contracts for classes, ensuring consistency and allowing for easier testing and mocking.
• Prefer Readable Code: Write clear and expressive code with proper naming conventions and documentation to improve maintainability.

Real-World Scenario: Building a Simple Inventory System

In this section, we will create a simple inventory management system using TypeScript classes, demonstrating the principles covered. The system will manage products and their stock levels.

class Product {
  private stock: number;

  constructor(public name: string, public price: number, initialStock: number) {
    this.stock = initialStock;
  }

  public restock(amount: number): void {
    this.stock += amount;
  }

  public sell(amount: number): boolean {
    if (this.stock >= amount) {
      this.stock -= amount;
      return true;
    }
    return false;
  }

  public getStock(): number {
    return this.stock;
  }
}

class Inventory {
  private products: Product[] = [];

  public addProduct(product: Product): void {
    this.products.push(product);
  }

  public getProductStock(name: string): number | null {
    const product = this.products.find(p => p.name === name);
    return product ? product.getStock() : null;
  }
}

const inventory = new Inventory();
const apple = new Product('Apple', 0.5, 100);
const banana = new Product('Banana', 0.3, 150);

inventory.addProduct(apple);
inventory.addProduct(banana);

apple.sell(10);
console.log(inventory.getProductStock('Apple')); // Output: 90
console.log(inventory.getProductStock('Banana')); // Output: 150

This example demonstrates how to build an Inventory class that manages multiple Product instances. Each Product can be restocked or sold, and the inventory keeps track of all products and their stock levels. The output verifies that the stock levels are updated correctly after selling products.

Conclusion

• TypeScript classes provide a structured way to implement object-oriented programming principles, enhancing code organization and maintainability.
• Key OOP concepts such as encapsulation, inheritance, and polymorphism can be effectively utilized in TypeScript to create scalable applications.
• Understanding access modifiers and best practices is crucial for writing robust TypeScript code.
• Real-world applications, such as inventory management systems, illustrate the practical benefits of using classes in TypeScript.