Defining Classes and Interfaces in TypeScript

TypeScript extends JavaScript by adding static types, allowing developers to define the shape and structure of their objects more explicitly through classes and interfaces. This guide will cover how to define classes and interfaces in TypeScript, along with examples demonstrating their usage.

Defining Classes

Classes in TypeScript are templates for creating objects. They encapsulate data and functions that operate on that data. Here’s how you can define a class in TypeScript:


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

const person1 = new Person("Alice", 30);
console.log(person1.greet()); // Output: Hello, my name is Alice and I am 30 years old.

Defining Interfaces

Interfaces in TypeScript define the structure that an object should follow. They do not contain any implementation but rather describe the shape of an object. Here’s how you can define an interface in TypeScript:


interface IPerson {
  name: string;
  age: number;
  greet(): string;
}

class Person implements IPerson {
  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.`;
  }
}

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

Extending Classes

TypeScript allows you to create new classes based on existing ones using inheritance. This is done using the extends keyword. Here’s an example of extending a class:


class Animal {
  name: string;

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

  move(distance: number): void {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark(); // Output: Woof! Woof!
dog.move(10); // Output: Buddy moved 10 meters.

Implementing Multiple Interfaces

In TypeScript, a class can implement multiple interfaces, ensuring it adheres to the structure defined by those interfaces. Here’s an example:


interface Flyable {
  fly(): void;
}

interface Swimmable {
  swim(): void;
}

class Duck implements Flyable, Swimmable {
  fly(): void {
    console.log("The duck is flying.");
  }

  swim(): void {
    console.log("The duck is swimming.");
  }
}

const duck = new Duck();
duck.fly(); // Output: The duck is flying.
duck.swim(); // Output: The duck is swimming.

Using Access Modifiers

TypeScript provides access modifiers to control the visibility of class members. These are public, private, and protected. Here’s how you can use them:


class Car {
  private brand: string;
  private model: string;

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

  public getCarInfo(): string {
    return `Car: ${this.brand} ${this.model}`;
  }
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.getCarInfo()); // Output: Car: Toyota Corolla

Conclusion

Defining classes and interfaces in TypeScript allows you to structure your code more robustly and predictably. Classes provide a way to create objects with properties and methods, while interfaces define the shape that objects should adhere to. By leveraging inheritance, implementing multiple interfaces, and using access modifiers, you can create clean and maintainable TypeScript code.

Archive