Exploring Object-Oriented Programming with TypeScript

In the world of software development, Object-Oriented Programming (OOP) has become a fundamental paradigm for creating complex and scalable applications. One of the most popular programming languages that supports OOP concepts is TypeScript. TypeScript is a superset of JavaScript, which adds static typing and other features to enhance code maintainability and readability. In this blog, we will explore the power of Object-Oriented Programming in TypeScript and how it can help us build robust and efficient applications.

1. Understanding Object-Oriented Programming (OOP):
Object-Oriented Programming is a programming paradigm that focuses on the creation and manipulation of objects to solve complex problems. It emphasizes the concept of classes and objects, encapsulation, inheritance, and polymorphism. These principles enable developers to build modular, reusable, and maintainable code.

2. Classes and Objects in TypeScript:
In TypeScript, a class is a blueprint for creating objects. It defines the properties and behavior that objects of the class will have. We can create multiple instances of a class, which are known as objects. Objects have their own state (properties) and behavior (methods).

Let's take an example of a "Person" class in TypeScript:

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

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

  public greet(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Creating an instance of the Person class
const john = new Person("Kwame", 25);
john.greet(); // Output: Hello, my name is Kwame and I am 25 years old.

In the above example, we define a class called "Person" with private properties (name and age), a constructor to initialize those properties, and a public method greet() to print a greeting. We then create an instance of the class and call the greet() method.

3. Encapsulation and Access Modifiers:
Encapsulation is a principle of OOP that enables the bundling of data and methods within a class, hiding the internal implementation details from the outside world. In TypeScript, we can achieve encapsulation using access modifiers.
There are three access modifiers in TypeScript:

*public: The default modifier. Public members are accessible from anywhere.
*private: Private members are only accessible within the class that defines them.
*protected: Protected members are accessible within the class that defines them and their subclasses.

4. Inheritance and Polymorphism:
Inheritance allows classes to inherit properties and methods from other classes. It promotes code reuse and allows us to create more specialized classes based on existing ones. TypeScript supports single inheritance, where a class can inherit from a single base class.

class Animal {
  protected name: string;

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

  public makeSound(): void {
    console.log("Generic animal sound");
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public makeSound(): void {
    console.log("Woof woof!");
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // Output: Woof woof!

In the example above, we have an "Animal" class with a protected property name and a makeSound() method. The "Dog" class extends the "Animal" class and overrides the makeSound() method to provide a specific sound for dogs. We create an instance of the "Dog" class and call the makeSound() method, which outputs "Woof woof!".

5. Polymorphism enables us to use a single interface or base class to represent multiple related classes. This allows us to write more flexible and extensible code. TypeScript supports polymorphism through inheritance and interfaces.

interface Shape {
  calculateArea(): number;
}

class Rectangle implements Shape {
  private width: number;
  private height: number;

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

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

class Circle implements Shape {
  private radius: number;

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

  public calculateArea(): number {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

const rectangle = new Rectangle(5, 10);
const circle = new Circle(3);

console.log(rectangle.calculateArea()); // Output: 50
console.log(circle.calculateArea());    // Output: 28.274333882308138

In this example, we define a "Shape" interface with a calculateArea() method. The "Rectangle" and "Circle" classes implement this interface and provide their own implementations of the method. We create instances of these classes and call the calculateArea() method, which calculates and returns the area of the respective shapes.

6. Abstraction:
Abstraction is a crucial concept in OOP that allows us to represent complex real-world entities in a simplified and generalized manner. It focuses on defining the essential characteristics and behaviors of an object while hiding the unnecessary details. In TypeScript, abstraction can be achieved through abstract classes and interfaces.

• Abstract Classes: An abstract class is a blueprint for other classes and cannot be instantiated directly. It may contain abstract methods (without an implementation) and concrete methods (with an implementation). Subclasses that inherit from an abstract class must provide an implementation for the abstract methods.

abstract class Animal {
  protected name: string;

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

  abstract makeSound(): void;

  public sleep(): void {
    console.log("Zzzz...");
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public makeSound(): void {
    console.log("Woof woof!");
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // Output: Woof woof!
myDog.sleep();     // Output: Zzzz...

In this example, the "Animal" class is declared as abstract, and it has an abstract method makeSound(). The "Dog" class extends the "Animal" class and provides an implementation for the makeSound() method. We create an instance of the "Dog" class and call the abstract and concrete methods.

7. Interfaces:
An interface is a contract that defines the structure and behavior of an object. It describes the properties and methods that a class must implement. Interfaces enable us to achieve multiple inheritance-like behavior in TypeScript.

interface Shape {
  calculateArea(): number;
}

interface Color {
  color: string;
}

class Rectangle implements Shape, Color {
  private width: number;
  private height: number;
  public color: string;

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

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

const rectangle: Shape & Color = new Rectangle(5, 10, "blue");
console.log(rectangle.calculateArea()); // Output: 50
console.log(rectangle.color);          // Output: blue

In this example, we define two interfaces, "Shape" and "Color". The "Rectangle" class implements both interfaces and provides the required properties and methods. We create an instance of the "Rectangle" class and access the methods and properties defined by the interfaces.

8. Generics:
Generics allow us to create reusable components that can work with a variety of data types. They provide flexibility and type safety by enabling us to define types that are determined at the time of use rather than declaration. Generics are widely used in collections, data structures, and algorithms.

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  public getValue(): T {
    return this.value;
  }
}

const numberBox = new Box<number>(10);
console.log(numberBox.getValue()); // Output: 10

const stringBox = new Box<string>("Hello");
console.log(stringBox.getValue()); // Output: Hello

In this example, we create a generic class called "Box" that can hold a value of any type. We define the type parameter T when creating an instance of the class. The getValue() method returns the stored value of the specified type.

9. Accessors (Getters and Setters):
TypeScript supports the use of accessors, also known as getters and setters, to provide controlled access to class properties. Getters and setters allow us to define custom logic when retrieving or assigning property values, enabling better encapsulation and validation.

class Person {
  private _name: string;

  get name(): string {
    return this._name;
  }

  set name(newName: string) {
    if (newName.length > 0) {
      this._name = newName;
    } else {
      console.log("Name cannot be empty.");
    }
  }
}

const person = new Person();
person.name = "John";
console.log(person.name); // Output: John

person.name = ""; // Output: Name cannot be empty.

In this example, we define a "Person" class with a private property _name. We define a getter name() and a setter name(newName: string). The setter validates the new name and sets the value only if it is not empty. We assign and retrieve the name property using the getter and setter.

Conclusion:

Object-Oriented Programming is a powerful paradigm for building complex and maintainable applications, and TypeScript provides robust support for OOP concepts. Through classes, objects, inheritance, encapsulation, polymorphism, abstraction, generics, and accessors, TypeScript enables developers to write modular, reusable, and type-safe code. By embracing these OOP principles, you can enhance the structure, maintainability, and scalability of your TypeScript projects.

Comments

[András Tóth]

I think there is one very crucial aspect of choosing Object-Oriented Programming in the JS/TS world of which there was only one mention: state.

For an API that gets a request and responds to each one of them, having controllers with state in them can be incredibly dangerous. I once managed to create a controller that worked perfectly when it was tested on one thread, but in real life people started seeing their responses in all sorts of languages. The state that held the language of the request, which looked totally normal to my OOP brain, was actually shared among requests, which we did not know until a test exposed.

If your application is more of a classic function, say from A input you have to respond with a B output, I think OOP is not the way. If your application has lots of state, like in a video game, each character, enemy, critter is having health points, attributes, etc., then OOP is going to be very-very useful. The decision should be based on how state is held, unified or distributed.

Finally you have the language. I think the best approach is working from the language not forcing a paradigm against the language. Javascript and typescript has limitations that breaks the paradigm of objects "owning" their own state and methods. I think everyone who worked with classes passed a class method to a function and got burned by losing this.

[Eckehard]

You should try VanJS as a framework. This plays nicely in an object oriented context, as it creates DOM elements dynamically from within Javascript. You can access those elements by reference directly, there is no need to use global ID´s anymore. This is a big advantage, a far better starting point to build fully encapsulated code.

Elements can be created and controlled from within class-objects. Each object can create it´s own DOM elements, that are private property. Nobody else get´s access to this elements, which is a perfect macht for OOP.

VanJS is really smart. It packs a fully reactive framework including state binding into a very small package of less than 2 kB. There is also a Typescript version of VanJS.