Skip to main content

Classes & OOP (Live Playground)

In this tutorial, we will explore classes and object-oriented programming (OOP) in TypeScript. Understanding how to create and use classes will enable you to write cleaner, more maintainable, and more organized code.

Classes​

Classes are a fundamental building block of object-oriented programming. In TypeScript, you can define a class using the class keyword followed by the class name:

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 person = new Person('John Doe', 30);
console.log(person.greet()); // Output: Hello, my name is John Doe and I am 30 years old.

In this example, we create a Person class with properties name and age, a constructor method, and a greet method.

Live Playground, Try it Yourself

Constructors​

A constructor is a special method that is called when you create a new instance of a class. In TypeScript, you can define a constructor using the constructor keyword:

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

In this example, we define a constructor with parameters name and age. We also use the public keyword to automatically create and initialize class properties with the same names as the constructor parameters.

Access Modifiers​

TypeScript supports three access modifiers: public, private, and protected. Access modifiers control the visibility and accessibility of class members:

  • public: Members can be accessed from any code.
  • private: Members can only be accessed within the class.
  • protected: Members can be accessed within the class and its subclasses.
TypeScript
class Person {
  private name: string;
  protected age: number;
  public title: string;

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

Inheritance​

Inheritance is a fundamental concept in object-oriented programming that allows you to create a new class that inherits the properties and methods of an existing class. In TypeScript, you can use the extends keyword to create a subclass:

TypeScript
class Employee extends Person {
  constructor(name: string, age: number, title: string, public salary: number) {
    super(name, age, title);
  }

  raiseSalary(amount: number): void {
    this.salary += amount;
  }
}

const employee = new Employee('Jane Doe', 28, 'Software Developer', 80000);
employee.raiseSalary(5000);
console.log(employee.salary); // Output: 85000

In this example, we create an Employee class that extends the Person class. The Employee class inherits the properties and methods of the Person class and adds a new property salary and a new method raiseSalary.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, we have explored classes and object-oriented programming in TypeScript. Understanding how to create and use classes, constructors, access modifiers, and inheritance will enable you to write cleaner, more maintainable, and more organized code.

As you continue to learn TypeScript, make sure to practice using classes and object-oriented programming concepts in your projects. This hands-on experience will help solidify your understanding of these concepts and make you a more confident TypeScript developer.