Introduction

Access modifiers are a feature of object-oriented programming languages that determine the accessibility or visibility of class members (properties and methods). In TypeScript, there are four access modifiers: public, private, protected, and readonly.

These modifiers can be applied to properties, methods, and constructors to control how they can be accessed and modified within a class and its derived classes.

Public

The public modifier is the default access modifier for class members. It means that the member can be accessed and modified from anywhere within the class and outside the class.

This is the most permissive access level, typically used for members that need to be exposed to the outside world.

Here’s an example of a class with a public property and a public method:

class Circle {
  public radius: number;

  public getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle();
circle.radius = 10; // valid
console.log(circle.getArea()); // valid 

Private

The private modifier specifies that a class member can only be accessed and modified within the class itself. It is not visible or accessible outside the class or its derived classes.

This is useful for encapsulating implementation details and preventing accidental or unintended modification of class internals.

Here’s an example of a class with a private property and a private method:

class Circle {
  private radius: number;
  private diameter: number;

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

  private getDiameter(): number {
    return this.diameter;
  }
}

const circle = new Circle(10);
circle.radius = 20; // Error: Property 'radius' is private and only accessible within class 'Circle'
circle.diameter = 20; // Error: Property 'diameter' is private and only accessible within class 'Circle'
console.log(circle.getDiameter()); // Error: Property 'getDiameter' is private and only accessible within class 'Circle' 

Protected

The protected modifier is similar to private, but it also allows class members to be accessed and modified from derived classes.

This is useful for implementing inheritance, where derived classes need to access and potentially override certain base class members.

Here’s an example of a base class with a protected property and a protected method, and a derived class that overrides the protected method:

class Shape {
  protected sides: number;

  protected getPerimeter(): number {
    return this.sides * 10;
  }
}

class Rectangle extends Shape {
  constructor(sides: number) {
    super();
    this.sides = sides;
  }

  public getArea(): number {
    return this.sides * 20;
  }

  protected getPerimeter(): number {
    return this.sides * 20;
  }
}

const rectangle = new Rectangle(4);
console.log(rectangle.sides); // Error: Property 'sides' is protected and only accessible within class 'Shape' and its subclasses
console.log(rectangle.getPerimeter()); // 80

Readonly

The readonly modifier specifies that a class member can only be accessed and not modified. It can be applied to properties and methods but not to constructors.

This is useful for constants or values that should not be changed after initializing them. Here’s an example of a class with a readonly property and a readonly method:

class Circle {
  readonly radius: number;

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

  readonly getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle(10);
circle.radius = 20; // Error: Cannot assign to 'radius' because it is a read-only property
circle.getArea = () => 100; // Error: Cannot assign to 'getArea' because it is a read-only method

Why should anyone need to know about access modifiers?

Access modifiers are an important concept in object-oriented programming. They are instrumental in TypeScript because they provide a way to enforce encapsulation and control the accessibility of class members.

Using access modifiers appropriately ensures that your code is well-organized, maintainable, and easy to understand.

For example, if you mark a class member as private, you can be sure that it will not be modified or accessed by external code, which can help prevent bugs and unintended side effects.

On the other hand, if you mark a class member as public, you can be sure that it will be accessible to external code, making it easier to use and reuse your code.

Conclusion

Overall, knowing how to use access modifiers in TypeScript can help you write better, more reliable, and more maintainable code.

I hope this article has clarified what access modifiers are in TypeScript, how they work, and why they are essential.

If you have any questions or comments, please feel free to leave a comment below!

Cheers!

👋 Hey, I'm Vlad Mihet

I'm Vlad Mihet, a blogger & Full-Stack Engineer who loves teaching others and helping small businesses develop and improve their technical solutions & digital presence.