Abstract classes in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an abstract class named Animal.

Typescript

abstract class [1] {
  abstract makeSound(): void;
}

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

AAnimal

BDog

CSound

DAnimalSound

Attempts:

3 left

💡 Hint

Common Mistakes

Using a concrete class name like 'Dog' instead of the abstract class name.

Forgetting to use the 'abstract' keyword before the class.

The keyword abstract is used to declare an abstract class. Here, the class name should be Animal.

2fill in blank

medium

Complete the code to correctly extend the abstract class Animal.

Typescript

class Dog extends [1] {
  makeSound(): void {
    console.log('Woof!');
  }
}

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

AAnimal

BSound

CDogSound

DCreature

Attempts:

3 left

💡 Hint

Common Mistakes

Extending a class that does not exist.

Using a different class name than the abstract class.

The class Dog extends the abstract class Animal to provide an implementation for the abstract method.

3fill in blank

hard

Fix the error in the code by completing the blank with the correct keyword to prevent instantiation of the class.

Typescript

[1] class Animal {
  makeSound(): void {
    console.log('Some sound');
  }
}

const animal = new Animal();

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

Astatic

Bfinal

Cprivate

Dabstract

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'final' which is not a TypeScript keyword.

Using 'static' or 'private' which do not prevent instantiation.

Marking the class as abstract prevents it from being instantiated directly.

4fill in blank

hard

Fill both blanks to declare an abstract method move in the abstract class Vehicle.

Typescript

abstract class Vehicle {
  [1] [2](): void;
}

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

Aabstract

Bmove

Crun

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name other than 'move'.

Not marking the method as abstract.

The method is declared as abstract and named move without a body in the abstract class.

5fill in blank

hard

Fill all three blanks to implement the abstract method move in the subclass Car.

Typescript

class Car extends Vehicle {
  [1] [2](): void {
    console.log('[3] fast');
  }
}

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

Amove

Boverride

Cdrives

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the 'override' keyword.

Using a different method name than 'move'.

Logging a wrong string.

The subclass Car uses the override keyword to implement the abstract method move and logs 'drives fast'.

Practice

1. What is true about an abstract class in TypeScript?

easy

A. Abstract classes are the same as interfaces.

B. Abstract classes cannot have any methods implemented.

C. You cannot create an instance of an abstract class directly.

D. You must use the new keyword to instantiate an abstract class.

Solution

1. Step 1: Understand abstract class instantiation rules

   Abstract classes cannot be instantiated directly, so you cannot create objects from them using new.

2. Step 2: Compare other options

   Abstract classes can have implemented methods, are different from interfaces, and cannot be instantiated with new.

3. Final Answer:

   You cannot create an instance of an abstract class directly. -> Option C

4. Quick Check:

   Abstract class instantiation = not allowed [OK]

Hint: Remember: abstract classes can't be directly instantiated [OK]

Common Mistakes:

• Thinking abstract classes are interfaces
• Assuming abstract classes can't have implemented methods
• Trying to instantiate abstract classes directly

2. Which of the following is the correct syntax to declare an abstract class in TypeScript?

easy

A. abstract class Vehicle {}

B. class abstract Vehicle {}

C. abstract Vehicle class {}

D. class Vehicle abstract {}

Solution

1. Step 1: Recall TypeScript abstract class syntax

   The correct syntax places the keyword abstract before class, followed by the class name.

2. Step 2: Check each option

   Only abstract class Vehicle {} correctly uses abstract class Vehicle {}. Others have incorrect keyword order.

3. Final Answer:

   abstract class Vehicle {} -> Option A

4. Quick Check:

   Abstract class syntax = abstract class Name {} [OK]

Hint: Put 'abstract' before 'class' keyword [OK]

Common Mistakes:

• Placing 'abstract' after 'class'
• Mixing keyword order
• Omitting 'abstract' keyword

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

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log('Moving');
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log('Bark');
  }
}

const dog = new Dog();
dog.makeSound();
dog.move();

medium

A. Moving\nBark

B. No output

C. Error: Cannot create instance of abstract class

D. Bark\nMoving

Solution

1. Step 1: Understand class inheritance and method calls

   The class Dog extends Animal and implements makeSound(). Calling dog.makeSound() prints 'Bark'.

2. Step 2: Check the move() method call

   The move() method is implemented in Animal and prints 'Moving'. Calling dog.move() prints 'Moving'.

3. Final Answer:

   Bark Moving -> Option D

4. Quick Check:

   Subclass methods run, abstract class methods inherited [OK]

Hint: Abstract methods must be implemented; inherited methods run normally [OK]

Common Mistakes:

• Thinking abstract class instance is created
• Confusing method call order
• Expecting errors on calling inherited methods

4. Identify the error in the following TypeScript code:

abstract class Shape {
  abstract area(): number;
}

class Circle extends Shape {
  radius: number;
  constructor(radius: number) {
    super();
    this.radius = radius;
  }
}

medium

A. Circle must implement the abstract method area()

B. Abstract class cannot have abstract methods

C. radius property should be private

D. Missing call to super() in Circle constructor

Solution

1. Step 1: Check abstract method implementation

   The abstract class Shape declares an abstract method area(). Any subclass must implement this method.

2. Step 2: Verify Circle class methods

   The Circle class does not implement area(), so this causes a compile-time error.

3. Final Answer:

   Circle must implement the abstract method area() -> Option A

4. Quick Check:

   Abstract methods require subclass implementation [OK]

Hint: All abstract methods must be implemented in subclasses [OK]

Common Mistakes:

• Forgetting to implement abstract methods
• Thinking super() call is not mandatory when base has no constructor
• Confusing abstract methods with optional methods

5. Given the abstract class below, which implementation correctly uses it to calculate the area of a rectangle?

abstract class Shape {
  abstract area(): number;
}

// Choose the correct Rectangle class implementation

hard

A. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width + this.height;
}
}

B. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}

C. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
area(): number {
return this.width + this.height;
}
}

D. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
}

Solution

1. Step 1: Check constructor and super() call

   Since Shape has no constructor, calling super() is required before using this in the subclass constructor.

2. Step 2: Verify area() method correctness

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } correctly implements area() returning width * height, which is the rectangle's area.

3. Step 3: Check other options for errors

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { this.width = width; this.height = height; } area(): number { return this.width + this.height; } } return width + height, which is incorrect for area. class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } } lacks area() implementation, causing error.

4. Final Answer:

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } -> Option B

5. Quick Check:

   Correct area method and constructor = class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } [OK]

Hint: Area of rectangle = width * height; implement abstract method [OK]

Common Mistakes:

• Returning sum instead of product for area
• Omitting abstract method implementation
• Forgetting to assign constructor parameters