TypeScript Access Modifiers

Similar to other programming languages, TypeScript permits the use of access modifiers at the class level. This provides direct control over access to the class members, which include both functions and properties. Class members can be utilized within the class itself, from outside the class, or in any child or derived classes.

The access modifier enhances the security of class members and safeguards them against improper usage. It can also be utilized to regulate the visibility of a class's data members. In the absence of a specified access modifier, TypeScript defaults to assigning a public access modifier to all members of the class.

The TypeScript access modifiers are of three types. These are:

• ✅ Public
• ✅ Private
• ✅ Protected.

Understanding all TypeScript access modifiers

Let us understand the access modifiers with a given table.

Public

By default in TypeScript, all members (both properties and methods) of a class are designated as public. Therefore, it is unnecessary to precede members with this keyword. We can freely access this data member from any location without limitations.

Example

class Student {
    public studCode: number;
    studName: string;
}

let stud = new Student();
stud.studCode = 101;
stud.studName = "Joe Root";

console.log(stud.studCode+ " "+stud.studName);

In the preceding example, studCode is designated as public, while studName is defined without an access modifier, leading TypeScript to interpret it as public by default. Because the data members are public, they can be accessed externally through an instance of the class.

Output:

Private

The private access modifier is not accessible beyond its defining class. It guarantees that the members of the class are only visible within the class that contains them.

Example

class Student {
public studCode: number;
private studName: string;
constructor(code: number, name: string){
this.studCode = code;
this.studName = name;
}
public display() {
return (`My unique code: ${this.studCode}, my name: ${this.studName}.`);
}
}

let student: Student = new Student(1, "JoeRoot");
console.log(student.display());

In the example provided, studCode is defined as private, while studName is declared without an access modifier, leading TypeScript to consider it public by default. Attempting to access the private member from outside the class will result in a compilation error.

Output:

Protected

A Protected access modifier is accessible solely within the class that defines it and its derived classes. It cannot be accessed from outside the class in which it resides.

Example

class Student {
    public studCode: number;
    protected studName: string;
    constructor(code: number, name: string){
        this.studCode = code;
        this.studName = name;
        }
}
class Person extends Student {
    private department: string;

    constructor(code: number, name: string, department: string) {
        super(code, name);
        this.department = department;
    }
    public getElevatorPitch() {
        return (`My unique code: ${this.studCode}, my name: ${this.studName} and I am in ${this.department} Branch.`);
    }
}
let joeRoot: Person = new Person(1, "JoeRoot", "CS");
console.log(joeRoot.getElevatorPitch());

In the preceding example, the name cannot be accessed from outside the Student class. However, it can still be utilized within an instance method of the Person class, as the Person class inherits from the Student class.

Output:

Readonly Modifier

• ✅ We can make the properties of the class, type, or interface readonly by using the readonly modifier.
• ✅ This modifier needs to be initialized at their declaration time or in the constructor.
• ✅ We can also access readonly member from the outside of a class, but its value cannot be changed.

Example

class Company {
 readonly country: string = "India";
 readonly name: string;
 
 constructor(contName: string) {
 this.name = contName;
 }
 showDetails() {
 console.log(this.name + " : " + this.country);
 }
}
 
let comp = new Company("TypeScript Tutorial");
comp.showDetails(); // TypeScript Tutorial : India
 
comp.name = "TCS"; //Error, name can be initialized only within constructor

Output: