Classes and Interfaces: Object-Oriented Programming in TypeScript

November 29, 2023

Object-oriented programming (OOP) is a popular programming paradigm that allows for the creation of complex and reusable code. In OOP, objects are the building blocks of code, each with its own set of properties and methods. JavaScript, being a dynamic and flexible language, already has some OOP capabilities. However, TypeScript takes it a step further by adding more structured and powerful OOP features.

One of the key concepts in OOP is classes. A class is a blueprint for creating objects with similar properties and methods. In TypeScript, we can use the class keyword to define a class. Let’s take a look at an example:

class Animal {
  name: string;
  age: number;
  sound: string;

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

  makeSound() {
    console.log(this.sound);
  }
}

let dog = new Animal("Buddy", 5, "Woof!");
dog.makeSound(); // Output: Woof!

In the above code, we have created a class called Animal with three properties: name, age, and sound. We have also defined a constructor method that sets the values of these properties when we create a new Animal object. Finally, we have a makeSound() method that logs the sound property to the console.

Another important concept in OOP is inheritance. Inheritance allows us to create new classes based on existing ones, inheriting their properties and methods. In TypeScript, we can use the extends keyword to implement inheritance. Let’s see an example:

class Dog extends Animal {
  breed: string;

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

  fetch() {
    console.log("Go get it, " + this.name + "!");
  }
}

let labrador = new Dog("Buddy", 5, "Woof!", "Labrador");
labrador.makeSound(); // Output: Woof!
labrador.fetch(); // Output: Go get it, Buddy!

In this example, we have created a new class called Dog that extends the Animal class. This means that the Dog class inherits the name, age, and sound properties from the Animal class. We have also added a new breed property and a fetch() method to the Dog class.

Interfaces are another important feature of TypeScript’s OOP capabilities. An interface is a way to define a set of properties and methods that an object must have. This is useful for creating reusable code and ensuring consistency in our codebase. Let’s see an example:

interface Shape {
  color: string;
  calculateArea(): number;
}

class Circle implements Shape {
  radius: number;

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

  color = "red";

  calculateArea() {
    return Math.PI * this.radius * this.radius;
  }
}

let circle = new Circle(5);
console.log(circle.color); // Output: red
console.log(circle.calculateArea()); // Output: 78.53981633974483

In this example, we have created an interface called Shape with two properties: color and calculateArea(). Then, we have created a class called Circle that implements the Shape interface. This means that the Circle class must have a color property and a calculateArea() method. We have also defined a color property and a calculateArea() method for the Circle class.

In conclusion, TypeScript’s OOP features, such as classes, inheritance, and interfaces, enhance JavaScript’s capabilities and allow for more structured and reusable code. By understanding and utilizing these concepts, we can write more efficient and maintainable code. Stay tuned for more tutorials on TypeScript and its powerful features