Do you think IIT Guwahati certified course can help you in your career?
Introduction
We do not know how a TV works from the inside; we just know how to change channels using buttons! The mechanics of a TV is hidden from us. This is called abstraction and it is a fundamental principle of object-oriented programming. TypeScript supports data abstraction and data hiding. Access modifiers in TypeScript can help us with data abstraction. The TV has its internals covered with plastic. So, we cannot change the internals unless we deliberately want to. In the same way in typescript, the readonly modifiers make the data unchangeable. In this article, we will look deeper into access modifiers and readonly modifiers. Let’s dive in.
What are access modifiers?
The idea of 'encapsulation'/ data hiding is used in object-oriented programming to make class members public, protected, or private, i.e., a class can control the visibility of its data members. We use access modifiers for this. TypeScript provides three access modifiers:
public
private
protected
We will learn about these in detail in further sections.
Why do we need access modifiers?
At the class level, Typescript allows us to apply access modifiers. Class members can be used within the class, outside the class, or within its child or derived classes. The access modifier makes the class members more secure and prevents them from being misused. It can also control the visibility of a class's data members. For instance, private class members are critical data like account numbers, personal information, etc., that should not be accessible and changeable by a regular user by mistake or deliberately. Thus these private members are only accessible by class members and not from outside the class.
Public access modifier
TypeScript applies the public access modifier to all class members if no access modifiers are required for the class. All public members can be accessed from anywhere in the code.
class Fruit {
public name!: string;
color!: string;
constructor() {
this.name = "orange";
this.color="orange";
}
}
let f = new Fruit();
f.name = "Apple";
f.color = "Red";
console.log(f.name," ",f.color)
Output:
Private access modifiers
The private access modifier ensures that class members are only visible to that class and are not visible to anybody else.
class Fruit {
private name!: string;
color!: string;
constructor() {
this.name = "orange";
this.color="orange";
}
}
let f = new Fruit();
f.name = "Apple";
f.color = "Red";
console.log(f.name)
console.log(f.color)
Output:
Since we are trying to directly access the name property of Fruit class outside the class, we get the above error. Let us make a few changes to the code:
class Fruit {
private name!: string;
color!: string;
constructor() {
this.name = "orange";
this.color="orange";
}
showFruitName(){
console.log(this.name)
}
}
let f = new Fruit();
f.color = "Red";
f.showFruitName();
console.log(f.color);
Output:
In the above code, since the showFruitName() function is inside class Fruit itself, it can access the private member, name.
Protected access modifiers
Unlike private members, protected members can be accessed via their class and derived classes. Since the protected member “name” is being accessed outside of the class and subclass, we get an error in the code below.
class Fruit {
protected name!: string;
color!: string;
constructor(n:string,c:string) {
this.name = n;
this.color = c;
}
}
class Food extends Fruit{
cost!:number;
constructor(n:string,c:string,ct:number){
super(n, c);
this.cost=ct;
}
showFruitName(){
console.log(this.name)
}
}
let food=new Food("Blue berries","blue",35);
console.log(food.name)
Output:
So instead of console logging name directly outside the class, we can call showFruitName() to remove the error. Like so:
let food=new Food("Blue berries","blue",35);
food.showFruitName()
Output:
Visibility comparison of access modifiers
Access Modifier
Is it accessible within the class?
Is it accessible in the derived class?
Is it accessible outside the class via class instance?
Public
Yes
Yes
Yes
Private
Yes
Yes
No
Protected
Yes
Yes
No
Readonly modifier
The readonly modifier in TypeScript makes it possible to make a class's properties immutable. A piece of immutable data is information that cannot (or should not) be deleted or updated. Let's take an example and make a property read-only, and then try to change it.
class Fruit {
readonly name!: string;
color!: string;
constructor(n:string,c:string) {
this.name = n;
this.color = c;
}
}
let f=new Fruit("Blue berries","blue");
f.name="Banana"
f.color="yellow"
Output:
Since you are trying to change the name which is a readonly property, you are getting the error. If you remove the line f.name=”Banana” then you would not get an error message.
FAQs
What is data abstraction? Data Abstraction exposes only the essential information to the outside world while hiding the internal details.
What is encapsulation? The bundling up of data into a single unit is called encapsulation. It's the thing that keeps code and the data it manipulates together. Encapsulation prevents data from being accessible by code outside it the unit.
What are the advantages of encapsulation? Advantages of encapsulation are:
Data hiding
Increased flexibility with modifiers
Reusability of code
Easy code testing
Key Takeaways
From this article, we learned about access modifiers and readonly modifiers and why we need them. We compared public, private, and protected access modifiers. We saw practical coding examples of these modifiers. But this is not enough; you need something extra to excel in Vue.js truly. If you want to learn more about Vue.js, you can read our articles on Vue.js or take our highly curated Web Development course.
568+ registered 
