Abstract methods in Typescript - Mini Project: Build & Apply

Using Abstract Methods in TypeScript

📖 Scenario: Imagine you are creating a simple system for different types of vehicles. Each vehicle must have a method to describe how it moves, but the exact way depends on the vehicle type.

🎯 Goal: You will build an abstract class Vehicle with an abstract method move(). Then, you will create two classes Car and Bicycle that extend Vehicle and provide their own move() method.

📋 What You'll Learn

Create an abstract class called Vehicle with an abstract method move() that returns a string.

Create a class called Car that extends Vehicle and implements the move() method returning the string 'The car drives on the road.'.

Create a class called Bicycle that extends Vehicle and implements the move() method returning the string 'The bicycle pedals along the path.'.

Create instances of Car and Bicycle and store them in variables myCar and myBike respectively.

Print the results of calling move() on both myCar and myBike.

💡 Why This Matters

🌍 Real World

Abstract methods are used in software design to define a common interface for different types of objects, like vehicles, animals, or shapes, ensuring they all have certain behaviors.

💼 Career

Understanding abstract classes and methods is important for designing clean, maintainable code in many programming jobs, especially when working with object-oriented languages like TypeScript.

1

Create the abstract class Vehicle with an abstract method move

Create an abstract class called Vehicle with an abstract method move() that returns a string.

Typescript

# Your code here
// Create abstract class Vehicle with abstract method move()

Hint

Use the abstract keyword before the class and the method. The method should have no body.

2

Create classes Car and Bicycle that extend Vehicle and implement move

Create a class called Car that extends Vehicle and implements the move() method returning the string 'The car drives on the road.'. Also create a class called Bicycle that extends Vehicle and implements the move() method returning the string 'The bicycle pedals along the path.'.

Typescript

abstract class Vehicle {
    abstract move(): string;
}

// Your code here
// Create class Car extends Vehicle with move() returning 'The car drives on the road.'
// Create class Bicycle extends Vehicle with move() returning 'The bicycle pedals along the path.'

Hint

Remember to use extends Vehicle and implement the move() method with the exact return strings.

3

Create instances of Car and Bicycle

Create an instance of Car called myCar and an instance of Bicycle called myBike.

Typescript

abstract class Vehicle {
    abstract move(): string;
}

class Car extends Vehicle {
    move(): string {
        return 'The car drives on the road.';
    }
}

class Bicycle extends Vehicle {
    move(): string {
        return 'The bicycle pedals along the path.';
    }
}

// Your code here
// Create myCar as new Car()
// Create myBike as new Bicycle()

Hint

Use const to create the instances with the exact variable names myCar and myBike.

4

Print the results of calling move() on myCar and myBike

Write two console.log statements to print the results of calling move() on myCar and myBike.

Typescript

abstract class Vehicle {
    abstract move(): string;
}

class Car extends Vehicle {
    move(): string {
        return 'The car drives on the road.';
    }
}

class Bicycle extends Vehicle {
    move(): string {
        return 'The bicycle pedals along the path.';
    }
}

const myCar = new Car();
const myBike = new Bicycle();

// Your code here
// Print myCar.move()
// Print myBike.move()

Hint

Use console.log(myCar.move()) and console.log(myBike.move()) to print the messages.

Practice

1. What is true about abstract methods in TypeScript?

easy

A. They have no body and must be implemented by subclasses.

B. They can be called directly without implementation.

C. They can only be used in interfaces, not classes.

D. They are optional to implement in child classes.

Solution

1. Step 1: Understand abstract method definition

   Abstract methods declare a method signature without a body inside an abstract class.

2. Step 2: Check subclass requirements

   Child classes must provide an implementation for all abstract methods.

3. Final Answer:

   They have no body and must be implemented by subclasses. -> Option A

4. Quick Check:

   Abstract methods require implementation [OK]

Hint: Abstract methods have no body and force subclass implementation [OK]

Common Mistakes:

• Thinking abstract methods can be called directly
• Confusing abstract methods with interface methods
• Assuming abstract methods are optional to implement

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

easy

A. abstract myMethod() { }

B. abstract myMethod(): void;

C. myMethod(): void;

D. abstract function myMethod() {}

Solution

1. Step 1: Recall abstract method syntax

   Abstract methods are declared with the abstract keyword and no body, ending with a semicolon.

2. Step 2: Analyze options

   abstract myMethod(): void; matches the correct syntax. Syntaxes that incorrectly include a body are invalid. myMethod(): void; lacks the abstract keyword.

3. Final Answer:

   abstract myMethod(): void; -> Option B

4. Quick Check:

   Abstract method syntax = abstract myMethod(): void; [OK]

Hint: Abstract methods have no body and end with a semicolon [OK]

Common Mistakes:

• Adding method body to abstract methods
• Omitting the abstract keyword
• Using function keyword inside class

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

abstract class Animal {
  abstract makeSound(): string;
}

class Dog extends Animal {
  makeSound(): string {
    return "Woof!";
  }
}

const dog = new Dog();
console.log(dog.makeSound());

medium

A. "Woof!"

B. Error: Cannot instantiate abstract class

C. undefined

D. Error: makeSound method not implemented

Solution

1. Step 1: Understand class hierarchy

   Animal is abstract with an abstract method makeSound. Dog extends Animal and implements makeSound returning "Woof!".

2. Step 2: Check instantiation and method call

   Dog is instantiated (allowed), and calling makeSound() returns "Woof!".

3. Final Answer:

   "Woof!" -> Option A

4. Quick Check:

   Implemented abstract method returns "Woof!" [OK]

Hint: Abstract class can't instantiate, but subclass can [OK]

Common Mistakes:

• Trying to instantiate abstract class directly
• Forgetting to implement abstract method
• Expecting undefined instead of returned string

4. Identify the error in the following TypeScript code:

abstract class Vehicle {
  abstract startEngine(): void;
}

class Car extends Vehicle {
  startEngine() {
    console.log("Engine started");
  }
}

const myCar = new Vehicle();

medium

A. startEngine method must be static.

B. Missing return type in startEngine method.

C. Cannot instantiate abstract class Vehicle.

D. Car class must be abstract.

Solution

1. Step 1: Check instantiation of abstract class

   The code tries to create an instance of Vehicle, which is abstract and cannot be instantiated.

2. Step 2: Verify method implementation and class declarations

   The Car class correctly implements startEngine. The method return type is optional in implementation. No need for static method or abstract Car class.

3. Final Answer:

   Cannot instantiate abstract class Vehicle. -> Option C

4. Quick Check:

   Abstract classes cannot be instantiated [OK]

Hint: Abstract classes cannot be instantiated directly [OK]

Common Mistakes:

• Trying to create instance of abstract class
• Thinking method must be static
• Confusing missing return type as error

5. Given the abstract class below, which implementation correctly uses abstract methods to calculate area?

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

// Choose the correct subclass implementation:

hard

A. class Square extends Shape {
constructor(private side: number) { super(); }
area(): string { return `${this.side}`; }
}

B. class Square extends Shape {
constructor(private side: number) {}
area() { return side * side; }
}

C. class Square extends Shape {
area(): number { return 0; }
}

D. class Square extends Shape {
constructor(private side: number) { super(); }
area(): number { return this.side * this.side; }
}

Solution

1. Step 1: Check constructor and super call

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } correctly calls super() in constructor, required for subclass of abstract class.

2. Step 2: Verify method signature and implementation

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } implements area() returning a number, matching abstract method signature. Other implementations have errors: one misses super() and uses an undefined variable, one returns 0 ignoring side, one returns string instead of number.

3. Final Answer:

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } -> Option D

4. Quick Check:

   Correct subclass calls super and matches method signature [OK]

Hint: Subclass must call super() and match abstract method signature [OK]

Common Mistakes:

• Omitting super() call in constructor
• Mismatching return types in method
• Using undefined variables inside method