Access Modifiers

Introduction

In TypeScript, access modifiers are keywords that control the visibility of class members (properties and methods). They help in encapsulating data and ensuring that class members can only be accessed or modified under controlled conditions. This tutorial will cover three main access modifiers: public, private, and protected.

Concept

Public

• Visibility: By default, all class members are public.
• Access: Can be accessed from anywhere, both inside the class and outside.

Private

• Visibility: Only accessible within the class that defines them.
• Access: Cannot be accessed or modified from outside the class.

Protected

• Visibility: Accessible within the class that defines them and by subclasses (derived classes).
• Access: Not accessible from outside the class hierarchy.

Examples

Let's explore each access modifier with practical examples.

Public Members

By default, all members of a class are public. This means they can be accessed from anywhere.

1class Animal {
2name: string;
3 
4constructor(name: string) {
5  this.name = name;
6}
7 
8greet() {
9  console.log(`Hello, my name is ${this.name}.`);
10}
11}
12 
13const dog = new Animal('Buddy');
14dog.greet(); // Output: Hello, my name is Buddy.
15console.log(dog.name); // Output: Buddy

Private Members

Private members can only be accessed within the class that defines them. They are not accessible from outside the class.

1class Animal {
2private name: string;
3 
4constructor(name: string) {
5  this.name = name;
6}
7 
8greet() {
9  console.log(`Hello, my name is ${this.name}.`);
10}
11}
12 
13const dog = new Animal('Buddy');
14dog.greet(); // Output: Hello, my name is Buddy.
15// console.log(dog.name); // Error: Property 'name' is private and only accessible within class 'Animal'.

Protected Members

Protected members are similar to private members but can also be accessed by subclasses.

1class Animal {
2protected name: string;
3 
4constructor(name: string) {
5  this.name = name;
6}
7 
8greet() {
9  console.log(`Hello, my name is ${this.name}.`);
10}
11}
12 
13class Dog extends Animal {
14breed: string;
15 
16constructor(name: string, breed: string) {
17  super(name);
18  this.breed = breed;
19}
20 
21displayInfo() {
22  console.log(`This dog's name is ${this.name} and it is a ${this.breed}.`);
23}
24}
25 
26const myDog = new Dog('Buddy', 'Golden Retriever');
27myDog.displayInfo(); // Output: This dog's name is Buddy and it is a Golden Retriever.
28// console.log(myDog.name); // Error: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.

What's Next?

Inheritance in TypeScript

Understanding access modifiers is crucial for building robust and maintainable applications. In the next section, we will explore how inheritance works in TypeScript, including how access modifiers behave in subclass scenarios.