Access Modifiers (Public, Private, Protected) in Typescript

Welcome to the “Access Modifiers in TypeScript” section of our course “Learn TypeScript”! In this article, we will cover the different access modifiers available in TypeScript and how you can use them to control the visibility and accessibility of class members. By the end of this article, you should have a good understanding of these concepts and be able to use them effectively in your TypeScript programs.

Introduction to Access Modifiers

In object-oriented programming, access modifiers are used to control the visibility and accessibility of class members (e.g. properties and methods). Access modifiers allow you to specify whether a class member is accessible from outside the class, or whether it is only accessible within the class or its subclasses.

TypeScript supports three access modifiers: “public”, “private”, and “protected”. The “public” modifier makes a class member accessible from anywhere, the “private” modifier makes a class member only accessible within the class, and the “protected” modifier makes a class member accessible within the class and its subclasses.

Public Access Modifier

The “public” access modifier is the default access modifier for class members in TypeScript. If you don’t specify an access modifier for a class member, it will be treated as “public” by default.

A “public” class member can be accessed from anywhere, including outside the class and its subclasses. For example:

class Point {
  public x: number;
  public y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

let point = new Point(10, 20);
console.log(point.x); // Outputs: 10
console.log(point.y); // Outputs: 20

In this example, we have defined a “Point” class with “public” x and y properties, and a constructor that initializes those properties. We can access the x and y properties from outside the “Point” class using the “.” operator.

Private Access Modifier

The “private” access modifier makes a class member only accessible within the class. A “private” class member cannot be accessed from outside the class or, you can use the “protected” access modifier to make a class member accessible within the class and its subclasses.

For example:

class Shape {
  protected area: number;

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

class Rectangle extends Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    super(width * height);
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.area;
  }
}

let rectangle = new Rectangle(10, 20);
console.log(rectangle.getArea()); // Outputs: 200

In this example, we have defined a “Shape” class with a “protected” “area” property and a constructor that initializes the “area” property. We have also defined a “Rectangle” class that extends the “Shape” class and has a “getArea” method that returns the “area” property. Since the “area” property is “protected”, it is only accessible within the “Shape” class and its subclasses (i.e. the “Rectangle” class).

Conclusion

In conclusion, this article has covered the different access modifiers available in TypeScript and how you can use them to control the visibility and accessibility of class members. You should now have a good understanding of these concepts and be able to use them effectively in your TypeScript programs. In future sections of our course, we will cover more advanced topics, such as generics and decorators, and how to use them to write more powerful TypeScript code.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

class Shape {
  protected area: number;

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

class Rectangle extends Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    super(width * height);
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.area; // Accessing protected property from within subclass
  }
}

let rectangle = new Rectangle(10, 20);
console.log(rectangle.getArea()); // Outputs: 200
console.log(rectangle.area); // Compiler error: Property 'area' is protected and only accessible within class 'Shape' and its subclasses.