What does the protected access modifier do?

TypeScriptJunior~2 min read

The protected modifier in TypeScript is an "intermediate" access level between private and public. It makes a property or method accessible inside the class and in all of its subclasses, but not accessible from outside (through a class instance).

1. Syntax and meaning

javascript

class Animal {
  protected type: string;

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

  protected move() {
    console.log(`${this.type} is moving`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.type} says: Woof!`);
    this.move(); // the protected method can be called
  }
}

const dog = new Dog("Dog");
dog.bark();  // ok
dog.type;    // Error - protected
dog.move();  // Error - protected

Here:

type and move() are visible inside Animal and Dog,
but are not accessible from outside through an instance.

2. Visibility rules

Where we access from	Access to `protected`
Inside the class itself	yes
In a subclass	yes
From outside (through an object)	no

3. Example: "protected" used for base logic

javascript

class Vehicle {
  protected speed: number = 0;

  protected accelerate(amount: number) {
    this.speed += amount;
  }

  public showSpeed() {
    console.log(`Speed: ${this.speed}`);
  }
}

class Car extends Vehicle {
  drive() {
    this.accelerate(50); // accessible
    this.showSpeed();
  }
}

const car = new Car();
car.drive();       // Speed: 50
car.accelerate(50); // Error - protected

accelerate() can only be used in classes that inherit from Vehicle.

4. Difference from `private`

Modifier	Access in the class	Access in a subclass	Access from outside
`public`	yes	yes	yes
`protected`	yes	yes	no
`private`	yes	no	no

5. Combining `protected` + `readonly`

javascript

class User {
  protected readonly role: string;

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

class Admin extends User {
  printRole() {
    console.log(this.role); // can be read
    // this.role = "user";  // cannot be changed - readonly
  }
}

You can use protected readonly - accessible in subclasses, but not modifiable.

6. A protected constructor (a Singleton / Factory example)

Sometimes the constructor itself is made protected, to prevent creating instances directly, while still allowing subclasses to do so:

javascript

abstract class BaseService {
  protected constructor(public name: string) {}
}

class UserService extends BaseService {
  constructor() {
    super("UserService");
  }
}

new UserService(); // ok
new BaseService("Base"); // Error - constructor is protected

Used when a class is not meant to be instantiated directly (often in design patterns).

7. An example from real code

javascript

abstract class Component {
  protected renderHTML(html: string) {
    console.log("Render:", html);
  }
}

class Button extends Component {
  render() {
    this.renderHTML("<button>Click me</button>"); // allowed
  }
}

const btn = new Button();
btn.render();        // ok
btn.renderHTML("");  // Error - protected

A great example for UI components or services: a base class provides protected utilities, and concrete subclasses use them without exposing them outside.

Summary

Property	Value
Accessible in the class itself	yes
Accessible in subclasses	yes
Accessible from outside (through an instance)	no
Common use	Base classes, templates, inheritance
Can be used with `readonly`	yes
Can be applied to methods and constructors	yes

In simpler terms:

protected is like private, but "accessible to children".

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.