Access modifiers public private protected in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the property accessible from anywhere.

Typescript

class Car {
  [1] speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
}

Drag options to blanks, or click blank then click option'

Apublic

Bprivate

Cprotected

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using private or protected which restrict access.

Using readonly which only prevents modification but does not control access.

The public modifier allows the property to be accessed from anywhere.

2fill in blank

medium

Complete the code to restrict access to the property only within the class.

Typescript

class BankAccount {
  [1] balance: number;
  constructor(balance: number) {
    this.balance = balance;
  }
}

Drag options to blanks, or click blank then click option'

Apublic

Bprivate

Cprotected

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using public which allows access everywhere.

Using protected which allows access in subclasses.

The private modifier restricts access to the property only inside the class.

3fill in blank

hard

Fix the error in the code by choosing the correct access modifier for the property to allow subclass access but not outside access.

Typescript

class Animal {
  [1] sound: string;
  constructor(sound: string) {
    this.sound = sound;
  }
}

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

Drag options to blanks, or click blank then click option'

Aprivate

Bpublic

Cprotected

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using private which blocks subclass access.

Using public which allows access everywhere.

The protected modifier allows access within the class and its subclasses, but not outside.

4fill in blank

hard

Fill both blanks to create a class with a private property and a public method to access it.

Typescript

class User {
  [1] password: string;
  constructor(password: string) {
    this.password = password;
  }
  [2] getPassword() {
    return this.password;
  }
}

Drag options to blanks, or click blank then click option'

Aprivate

Bpublic

Cprotected

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Making the method private so it cannot be called.

Making the property public exposing sensitive data.

The password is private to hide it, and the method is public to allow controlled access.

5fill in blank

hard

Fill all three blanks to define a class with a protected property, a public method to get it, and a subclass accessing it.

Typescript

class Vehicle {
  [1] model: string;
  constructor(model: string) {
    this.model = model;
  }
  [2] getModel() {
    return this.model;
  }
}

class Car extends Vehicle {
  showModel() {
    return this.[3];
  }
}

Drag options to blanks, or click blank then click option'

Aprotected

Bpublic

Cmodel

Dprivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using private property which blocks subclass access.

Using wrong property name in subclass.

Making method private so it cannot be called.

The property is protected so the subclass can access it. The method is public to allow outside access. The subclass accesses the property by its name model.

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