WittCode💻

TypeScript Access Modifiers

By

Learn about the TypeScript public access modifier, private access modifier, and protected access modifier including when to use the TypeScript access modifiers.

Table of Contents 📖

What is an Access Modifier?

Access modifiers change the accessibility and visibility of the methods and properties of a class. TypeScript has three different access modifiers namely public, private, and protected.

Public Modifier

The TypeScript public modifier allows the property or method to be accessible everywhere. In other words, both inside and outside the class. As an example, lets create a Human class and give it the public properties name and age and the public method sayHello.

class Human {
    public name: string;
    public age: number;

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

    public sayHello() {
        console.log(`Hello my name is ${this.name} and I am ${this.age} years old!`);
    }
}

const human: Human = new Human('WittCode', 27);
human.sayHello();  // Hello my name is WittCode and I am 27 years old!
human.name;  // WittCode
human.age;  // 27

Here, after instantiating a Human object, we can access the sayHello method and name and age properties both inside and outside the Human class. By default, every property and method of a class has its access modifier set to public. In other words, if no access modifier is specified, then it will be public. To demonstrate, lets create a property called favorite food and a method called sayFavoriteFood without specifying an access modifier.

class Human {
    // ...
    favFood: string;

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

    // ...

    sayFavFood() {
        console.log(`My favorite food is ${this.favFood}!`);
    }
}

const human: Human = new Human('WittCode', 27, 'pizza');
// ...
human.sayFavFood();  // My favorite food is pizza!
human.favFood;  //  pizza

Here, even though we don't specify an access modifier for favFood and sayFavFood, they become public by default. As such, they behave just like the other properties and method.

Private Modifier

The private access modifier limits the property/method to the class. In other words, when a property or method is private, it is only accessible within the class. The main purpose of the private modifier is to hide an object's data from the outside world and encapsulate the object. Lets make a private property of the Human class called secret and a private method called saySecret.

class Human {
    // ...
    private secret: string;

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

    // ...

    private saySecret() {
        console.log(`My secret is ${this.secret}`);
    }
}

const human: Human = new Human('WittCode', 27, 'pizza', 'my secret');
// ...
human.saySecret();  // Property 'saySecret' is private and only accessible within class 'Human'
human.secret;  // Property 'secret' is private and only accessible within class 'Human;

Here, when we try to access either the private saySecret method or private secret property outside of the Human class, we get an error saying it is private and only accessible within the class Human.

Protected Modifier

The protected access modifier limits the accessibility of a class's properties and methods to the class and its subclasses. In other words, when a class extends a class with protected properties and methods, the child class (subclass) and parent class (superclass) can access those properties and methods. For example, a subclass of a Human could be a Student as a Student is a Human. So, lets create a protected property and method in the Human class, create a Student subclass, and access that property and method.

class Human {
    // ...
    protected address: string;

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

    // ...

    protected sayAddress() {
        console.log(`My address is ${this.address}!`);
    }

}
    
class Student extends Human {
    private studentId: number;
    private gpa: number;

    constructor(studentId: number, gpa: number) {
        super('WittCode', 27, 'pizza', 'my secret', 'my address');
        this.studentId = studentId;
        this.gpa = gpa;
        this.sayAddress();  // My favorite food is pizza!
        this.address;  // my address
    }
}

const student: Student = new Student(1234, 4.0);
student.sayAddress();  // Property 'sayAddress' is protected and only accessible within class 'Human' and its subclasses.
student.address;  // Property 'address' is protected and only accessible within class 'Human' and its subclasses.

const human: Human = new Human('WittCode', 27, 'pizza', 'my secret');
human.sayAddress();  // Property 'sayAddress' is protected and only accessible within class 'Human' and its subclasses.
human.address;  // Property 'address' is protected and only accessible within class 'Human' and its subclasses.

Here, we can access the protected address property and sayAddress method within the Student class as it is a subclass of the Human class. It is a subclass because it extends the Human class. The address property and sayAddress method are not accessible outside of the Human or Student classes. This is why we get an error when accessing these properties outside of these two classes.

When to use Each Modifier?

As a general rule, it is good to encapsulate objects. Therefore, properties and functions should be as private as possible. This leads to better code management and specificity as we know where properties are being accessed or changed. Therefore, the private modifier should be used primarily, then protected, and then public.