Define Classes in TypeScript

Back to: TypeScript Tutorial

TypeScript is a superset of JavaScript that introduces the concept of static typing to the language. One of the key features of TypeScript is its support for object-oriented programming (OOP) concepts like classes, interfaces, and inheritance. Classes are a fundamental building block of OOP and provide a way to define a blueprint for creating objects with shared properties and behaviors.

In TypeScript, classes can have properties, methods, constructors, and access modifiers that control the visibility of those members. They also support inheritance, allowing new classes to be based on existing ones and inherit their properties and methods.

Defining a Class in TypeScript:

To define a class in TypeScript, use the class keyword followed by the name of the class. Inside the class, you can define properties and methods as needed. Here’s an example:

class Person {
  name: string;
  age: number;

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person("John", 30);
john.sayHello(); // outputs "Hello, my name is John and I'm 30 years old."

In this example, we define a Person class with two properties (name and age) and a constructor that initializes those properties. We also define a sayHello method that logs a greeting to the console. Finally, we create a new instance of the Person class using the new keyword and call the sayHello method on it.

Access Modifiers:

In TypeScript, access modifiers can be used to control the visibility of properties and methods within a class. There are three access modifiers:

public: The default access modifier, which means the property or method is visible from inside and outside the class.
private: The property or method is only visible from inside the class.
protected: The property or method is visible from inside the class and any subclasses.

Here’s an example of using access modifiers in a class:

class BankAccount {
  private balance: number;

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

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

  public withdraw(amount: number) {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log("Insufficient funds");
    }
  }

  protected getBalance() {
    return this.balance;
  }
}

class SavingsAccount extends BankAccount {
  public addInterest() {
    const interest = this.getBalance() * 0.05;
    this.deposit(interest);
  }
}

const account = new SavingsAccount(1000);
account.addInterest(); // adds 5% interest to the balance
console.log(account.getBalance()); // error: getBalance is protected

In this example, we define a BankAccount class with a private balance property and public deposit and withdraw methods. We also define a protected getBalance method that returns the balance.

We then define a SavingsAccount class that extends BankAccount and adds a addInterest method that calculates and deposits interest. Because getBalance is protected, it can be accessed from within SavingsAccount.

Conclusion

In conclusion, understanding classes is an essential part of object-oriented programming in TypeScript. Classes provide a way to create blueprints for objects and define their properties, methods, and access modifiers. By using classes, you can write more structured and maintainable code. Additionally, understanding asynchronous programming is crucial for writing efficient and responsive JavaScript applications. Using promises, async/await, and callbacks can help improve the performance of your code by allowing it to execute non-blocking operations. Overall, these concepts are fundamental to mastering TypeScript and creating robust, performant applications.

Defining a Class in TypeScript:

Access Modifiers:

Top Questions on Classes in TypeScript:

Conclusion

Stay Connected