Access modifiers public private protected in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using access modifiers?

Consider this TypeScript class with different access modifiers. What will be printed when the code runs?

Typescript

class Animal {
  public name: string;
  private age: number;
  protected sound: string;

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

  public makeSound() {
    console.log(`${this.name} says ${this.sound}`);
  }
}

class Dog extends Animal {
  public showAge() {
    // console.log(this.age); // What happens if uncommented?
    console.log(`Dog's sound is ${this.sound}`);
  }
}

const dog = new Dog('Buddy', 5, 'Woof');
dog.makeSound();
dog.showAge();

A Buddy says Woof\nDog's sound is Woof

B Buddy says Woof\nError: Property 'sound' is private and only accessible within class 'Animal'.

C Error: Property 'age' is private and only accessible within class 'Animal'.

D Buddy says Woof\nDog's sound is undefined

💡 Hint

Remember that protected members are accessible in subclasses, but private members are not.

The public member name is accessible everywhere. The private member age is only accessible inside Animal. The protected member sound is accessible inside Animal and its subclasses like Dog. So dog.showAge() can access sound but not age.

🧠 Conceptual

intermediate

Which access modifier allows a class member to be accessed only within the class itself?

Choose the correct access modifier in TypeScript that restricts access to a class member only inside the class where it is declared.

A public

B private

C protected

D readonly

💡 Hint

Think about which modifier hides the member from subclasses and outside code.

private means the member is accessible only inside the class it is declared in. protected allows access in subclasses. public allows access everywhere. readonly is about immutability, not access.

🔧 Debug

advanced

Why does this TypeScript code cause an error?

Look at this code snippet. Why does it cause a compilation error?

Typescript

class Person {
  private ssn: string;

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

const p = new Person('123-45-6789');
console.log(p.ssn);

A Error because 'ssn' is protected and cannot be accessed here.

B Error because 'ssn' is not initialized in the constructor.

C No error; it prints '123-45-6789'.

D Error because 'ssn' is private and cannot be accessed outside the class.

💡 Hint

Check the access level of ssn and where it is accessed.

The ssn property is marked private, so it cannot be accessed outside the Person class. Trying to access p.ssn causes a compilation error.

📝 Syntax

advanced

Which option correctly declares a protected member in a TypeScript class?

Choose the correct syntax to declare a protected property id of type number inside a class.

A public protected id: number;

B private protected id: number;

C protected id: number;

D id: protected number;

💡 Hint

Access modifiers come before the property name and type.

The correct syntax is protected id: number;. Modifiers like private and public cannot be combined with protected. The type comes after the property name.

🚀 Application

expert

How many accessible members does this subclass instance have?

Given the following TypeScript classes, how many members can be accessed directly from an instance of Employee?

Typescript

class User {
  public username: string;
  private password: string;
  protected email: string;

  constructor(username: string, password: string, email: string) {
    this.username = username;
    this.password = password;
    this.email = email;
  }

  public getUsername() {
    return this.username;
  }
}

class Employee extends User {
  public employeeId: number;

  constructor(username: string, password: string, email: string, employeeId: number) {
    super(username, password, email);
    this.employeeId = employeeId;
  }

  public getEmail() {
    return this.email;
  }
}

const emp = new Employee('alice', 'secret', '[e-mail]', 101);

A 4 (username, employeeId, getUsername, getEmail)

B 3 (username, employeeId, getUsername)

C 2 (employeeId, getEmail)

D 5 (username, password, email, employeeId, getUsername)

💡 Hint

Consider which members are accessible directly on the instance and which are private or protected.

From the instance emp, you can access username (public), employeeId (public), getUsername() (public method), and getEmail() (public method). The password is private and email is protected, so they are not accessible directly. Protected members are accessible inside subclasses but not from outside instances.

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