Difference Between Protected Vs Private In TypeScript

TypeScript, a superset of JavaScript, introduces several features that enhance the development experience by adding static types. Among these features are access modifiers, which control the visibility and accessibility of class members.

In this tutorial, we will explore the difference between the protected vs private in TypeScript, their use cases, and provide detailed examples to illustrate their functionality.

Table of Contents

Introduction to Access Modifiers

Access modifiers in TypeScript are keywords that set the accessibility of classes, methods, and properties. They define who can access these members. TypeScript supports three main access modifiers:

public: Accessible from anywhere.
private: Accessible only within the class it is defined.
protected: Accessible within the class and its subclasses.

This tutorial focuses on the private and protected access modifiers, examining their differences and appropriate use cases.

Protected vs Private in TypeScript

Below, I will provide a detailed explanation about the Protected vs Private in TypeScript so that you will easily understand the difference between them.

The Private Access Modifier

Definition

The private access modifier restricts access to the class where it is defined. Members marked as private cannot be accessed or modified outside of their declaring class.

Use Cases

The private modifier is useful when you want to encapsulate and hide the internal details of a class. This ensures that the class’s internal state is not altered inappropriately from outside the class.

Example

class Animal {
    private name: string;

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

    private makeSound(): void {
        console.log(`${this.name} makes a sound.`);
    }

    public speak(): void {
        this.makeSound();
    }
}

const dog = new Animal("Dog");
dog.speak(); // Outputs: Dog makes a sound.
console.log(dog.name); // Error: Property 'name' is private and only accessible within class 'Animal'.
dog.makeSound(); // Error: Method 'makeSound' is private and only accessible within class 'Animal'.

In the example above, the name property and the makeSound method are private. They cannot be accessed directly from outside the Animal class, ensuring that these members are protected from external modifications.

The Protected Access Modifier

Definition

The protected access modifier is similar to private, but with an important difference: members marked as protected can be accessed within the class they are defined in and by subclasses derived from that class.

Use Cases

The protected modifier is useful when you want to allow subclasses to access and modify certain members of the parent class while still restricting access from outside the class hierarchy.

Example

class Animal {
    protected name: string;

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

    protected makeSound(): void {
        console.log(`${this.name} makes a sound.`);
    }

    public speak(): void {
        this.makeSound();
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    public bark(): void {
        console.log(`${this.name} barks.`);
        this.makeSound(); // Accessible because it's protected
    }
}

const dog = new Dog("Dog");
dog.speak(); // Outputs: Dog makes a sound.
dog.bark(); // Outputs: Dog barks. Dog makes a sound.
console.log(dog.name); // Error: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.

In this example, the name property and the makeSound method are protected. They are accessible within the Animal class and the Dog subclass, but not from outside these classes.