Access modifiers public private protected in Typescript - Step-by-Step Execution

Concept Flow - Access modifiers public private protected

Start: Define class with members

↓

Apply access modifiers

↓

public

↓

Accessible everywhere

↓

Accessible only inside class

↓

Accessible inside class and subclasses

↓

Use members accordingly

↓

End

This flow shows how class members are marked with public, private, or protected and how their accessibility differs.

Execution Sample

Typescript

class Person {
  public name: string;
  private age: number;
  protected city: string;

  constructor(name: string, age: number, city: string) {
    this.name = name; this.age = age; this.city = city;
  }
}

Defines a class with three members having different access modifiers.

Execution Table

Step	Action	Member	Access Modifier	Accessible From	Result
1	Define member	name	public	Anywhere	Can be accessed from any code
2	Define member	age	private	Inside Person class only	Cannot be accessed outside Person
3	Define member	city	protected	Person and subclasses	Accessible in Person and subclasses
4	Create instance p = new Person('Alice', 30, 'NY')	-	-	-	Instance created with values
5	Access p.name	name	public	Anywhere	Allowed, returns 'Alice'
6	Access p.age	age	private	Outside class	Error: Property 'age' is private
7	Access p.city	city	protected	Outside class	Error: Property 'city' is protected
8	Subclass Employee extends Person	-	-	-	Subclass created
9	Inside Employee method, access this.city	city	protected	Subclass	Allowed, can access 'city'
10	Inside Employee method, access this.age	age	private	Subclass	Error: 'age' is private to Person
11	End	-	-	-	Execution ends

💡 Execution ends after demonstrating access rules for all modifiers

Variable Tracker

Variable	Start	After Instance Creation	After Access Attempts	Final
name	undefined	'Alice'	'Alice'	'Alice'
age	undefined	30	Error on access outside class	30 (private)
city	undefined	'NY'	Error on access outside class, allowed in subclass	'NY' (protected)

Key Moments - 3 Insights

Why can't we access the private member 'age' from outside the class?

Because 'age' is marked private, it is only accessible inside the Person class itself, as shown in execution_table row 6 where access outside causes an error.

Can a subclass access protected members of its parent class?

Yes, protected members like 'city' can be accessed inside subclasses, as shown in execution_table row 9 where Employee accesses this.city successfully.

Is a public member accessible from anywhere?

Yes, public members like 'name' can be accessed from any code, demonstrated in execution_table row 5 where p.name is accessed without error.

Visual Quiz - 3 Questions

Look at the execution_table row 6. What happens when we try to access p.age outside the class?

A It causes an error because 'age' is private

B It returns undefined

C It returns the value 30

D It returns null

💡 Hint

Check execution_table row 6 where accessing p.age outside the class causes an error

According to variable_tracker, what is the value of 'city' after instance creation?

A Error on access

B 'NY'

C undefined

D null

💡 Hint

Look at variable_tracker row for 'city' under 'After Instance Creation'

If we change 'city' from protected to private, what will happen when Employee subclass tries to access it?

A Access will be allowed

B It will become public

C Access will cause an error

D It will be undefined

💡 Hint

Refer to execution_table rows 9 and 10 about protected vs private access in subclasses

Concept Snapshot

Access modifiers control visibility of class members:
- public: accessible anywhere
- private: accessible only inside the class
- protected: accessible inside class and subclasses
Use them to protect data and control access in TypeScript classes.

Full Transcript

This visual execution trace shows how TypeScript access modifiers public, private, and protected work in a class. We define a class Person with three members: name (public), age (private), and city (protected). Public members can be accessed anywhere, private only inside the class, and protected inside the class and subclasses. We create an instance and try accessing these members from outside and inside a subclass. The trace shows errors when accessing private or protected members outside allowed scopes, and successful access when allowed. This helps beginners understand how access modifiers control visibility and protect data in classes.

Practice

1. Which access modifier in TypeScript allows a class member to be accessed from anywhere, including outside the class?

easy

A. private

B. public

C. protected

D. readonly

Solution

1. Step 1: Understand access modifiers

   public means anyone can access the member, private restricts access to the class only, and protected allows access to the class and its subclasses.

2. Step 2: Identify the modifier allowing access from anywhere

   Only public allows access from outside the class, including other classes and code.

3. Final Answer:

   public -> Option B

4. Quick Check:

   public = accessible everywhere [OK]

Hint: Public means open to all, private is class-only [OK]

Common Mistakes:

• Confusing private with public access
• Thinking protected is accessible outside class
• Assuming readonly controls access

2. Which of the following is the correct syntax to declare a private property named age in a TypeScript class?

easy

A. private age: number;

B. public age: number;

C. protected age: number;

D. age: private number;

Solution

1. Step 1: Recall TypeScript property declaration syntax

   Access modifiers come before the property name and type, e.g., private age: number;.

2. Step 2: Identify correct modifier placement

   private age: number; correctly places private before the property name and type. age: private number; has incorrect order.

3. Final Answer:

   private age: number; -> Option A

4. Quick Check:

   Modifier before name and type [OK]

Hint: Modifier comes before property name and type [OK]

Common Mistakes:

• Placing modifier after property name
• Using invalid syntax like 'age: private number;'
• Confusing protected and private keywords

3. What will be the output of the following TypeScript code?

class Animal {
  protected sound = 'Roar';
}

class Lion extends Animal {
  public makeSound() {
    return this.sound;
  }
}

const lion = new Lion();
console.log(lion.makeSound());

medium

A. Error: Cannot access protected property

B. undefined

C. "Roar"

D. Error: Property 'sound' is private

Solution

1. Step 1: Understand protected access

   The property sound is protected, so it can be accessed inside the class and its subclasses like Lion.

2. Step 2: Trace method call and output

   The makeSound method returns this.sound, which is "Roar". So, console.log prints "Roar".

3. Final Answer:

   "Roar" -> Option C

4. Quick Check:

   Protected allows subclass access [OK]

Hint: Protected allows subclass access, so value is returned [OK]

Common Mistakes:

• Thinking protected is inaccessible outside class
• Confusing private with protected
• Expecting runtime error for protected access

4. Identify the error in the following TypeScript code:

class Person {
  private name: string = 'Alice';
}

const p = new Person();
console.log(p.name);

medium

A. Error: Property 'name' is protected, not accessible

B. No error, prints 'Alice'

C. Syntax error: missing constructor

D. Error: Cannot access private property 'name' outside class

Solution

1. Step 1: Check access modifier usage

   The property name is declared private, so it cannot be accessed outside the class Person.

2. Step 2: Analyze the console.log statement

   Trying to access p.name outside the class causes a compile-time error about private access.

3. Final Answer:

   Error: Cannot access private property 'name' outside class -> Option D

4. Quick Check:

   Private blocks outside access [OK]

Hint: Private blocks outside class access, causing error [OK]

Common Mistakes:

• Assuming private properties are accessible outside
• Confusing private with protected
• Expecting code to print property value

5. Given the following TypeScript classes, which line will cause a compilation error?

class Vehicle {
  protected speed: number = 0;
  private engineOn: boolean = false;

  public start() {
    this.engineOn = true;
  }
}

class Car extends Vehicle {
  public accelerate() {
    this.speed += 10;  // Line 1
    this.engineOn = true; // Line 2
  }
}

const car = new Car();
car.accelerate();

hard

A. Line 2: Accessing private property 'engineOn' in subclass

B. No error, both lines are valid

C. Line 1: Accessing protected property 'speed' in subclass

D. Error at car.accelerate() call

Solution

1. Step 1: Understand access levels of properties

   speed is protected, so accessible in subclass Car. engineOn is private, accessible only inside Vehicle.

2. Step 2: Analyze lines in subclass method

   Line 1 accesses speed and is valid. Line 2 tries to access engineOn directly, which causes a compilation error.

3. Final Answer:

   Line 2: Accessing private property 'engineOn' in subclass -> Option A

4. Quick Check:

   Private blocks subclass access [OK]

Hint: Private blocks subclass access; protected allows it [OK]

Common Mistakes:

• Assuming private is accessible in subclasses
• Thinking protected is private
• Ignoring error on private property access