Polymorphism through interfaces in Typescript - Mini Project: Build & Apply

Polymorphism through interfaces

📖 Scenario: You are building a simple system to handle different types of notifications in an app. Each notification type should be able to send its message in its own way.

🎯 Goal: Create an interface called Notifier with a method send(). Then create two classes EmailNotifier and SMSNotifier that implement this interface. Finally, use polymorphism to call send() on both types of notifiers.

📋 What You'll Learn

Create an interface called Notifier with a method send() that returns void.

Create a class called EmailNotifier that implements Notifier and its send() method prints 'Sending email notification'.

Create a class called SMSNotifier that implements Notifier and its send() method prints 'Sending SMS notification'.

Create an array called notifiers of type Notifier[] containing instances of EmailNotifier and SMSNotifier.

Use a for loop to call send() on each notifier in the notifiers array.

Print the output of each send() call.

💡 Why This Matters

🌍 Real World

Many apps send notifications in different ways like email, SMS, or push notifications. Using interfaces and polymorphism helps manage these different types easily.

💼 Career

Understanding polymorphism and interfaces is key for writing flexible and maintainable code in TypeScript and many other programming languages.

1

Create the Notifier interface

Create an interface called Notifier with a method send() that returns void.

Typescript

// Your code here

Hint

An interface defines a contract. Here, Notifier must have a send() method that returns nothing.

2

Create EmailNotifier and SMSNotifier classes

Create a class called EmailNotifier that implements Notifier with a send() method that prints 'Sending email notification'. Also create a class called SMSNotifier that implements Notifier with a send() method that prints 'Sending SMS notification'.

Typescript

interface Notifier {
    send(): void;
}

// Your code here

Hint

Use implements Notifier after the class name. The send() method should use console.log to print the messages.

3

Create an array of notifiers

Create an array called notifiers of type Notifier[] containing one instance of EmailNotifier and one instance of SMSNotifier.

Typescript

interface Notifier {
    send(): void;
}

class EmailNotifier implements Notifier {
    send(): void {
        console.log('Sending email notification');
    }
}

class SMSNotifier implements Notifier {
    send(): void {
        console.log('Sending SMS notification');
    }
}

// Your code here

Hint

Create the array with the exact name notifiers and include one instance of each notifier class.

4

Call send() on each notifier and print output

Use a for loop with variable notifier to iterate over the notifiers array and call notifier.send() inside the loop.

Typescript

interface Notifier {
    send(): void;
}

class EmailNotifier implements Notifier {
    send(): void {
        console.log('Sending email notification');
    }
}

class SMSNotifier implements Notifier {
    send(): void {
        console.log('Sending SMS notification');
    }
}

const notifiers: Notifier[] = [new EmailNotifier(), new SMSNotifier()];

// Your code here

Hint

Use a for...of loop to call send() on each notifier. The output should show both messages.

Practice

1. What does polymorphism through interfaces allow in TypeScript?

easy

A. Only one class can implement an interface

B. Different classes to be treated the same if they implement the same interface

C. Interfaces can hold data like variables

D. Classes cannot implement more than one interface

Solution

1. Step 1: Understand polymorphism concept

   Polymorphism means using different objects in the same way if they share a common interface.

2. Step 2: Apply to interfaces in TypeScript

   Interfaces define methods that classes promise to implement, allowing different classes to be used interchangeably.

3. Final Answer:

   Different classes to be treated the same if they implement the same interface -> Option B

4. Quick Check:

   Polymorphism = Same interface, different classes [OK]

Hint: Polymorphism means same interface, different class objects [OK]

Common Mistakes:

• Thinking interfaces hold data like variables
• Believing only one class can implement an interface
• Assuming classes can't implement multiple interfaces

2. Which of the following is the correct syntax for a TypeScript interface with a method speak() that returns a string?

easy

A. interface Animal { speak(): string; }

B. interface Animal { speak: string(); }

C. interface Animal { speak() => string; }

D. interface Animal { speak: () => string; }

Solution

1. Step 1: Review interface method syntax

   In TypeScript, methods in interfaces are declared as methodName(): returnType;.

2. Step 2: Check each option

   interface Animal { speak(): string; } correctly uses speak(): string;. interface Animal { speak: string(); } incorrectly places parentheses after the type. interface Animal { speak() => string; } uses arrow syntax wrongly. interface Animal { speak: () => string; } uses a function type, which is valid but less common for method declarations.

3. Final Answer:

   interface Animal { speak(): string; } -> Option A

4. Quick Check:

   Method syntax = methodName(): returnType [OK]

Hint: Method in interface uses colon after name, not arrow [OK]

Common Mistakes:

• Using arrow syntax inside interface method
• Putting parentheses after type instead of method name
• Confusing function type with method declaration

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

interface Shape {
  area(): number;
}

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

class Circle implements Shape {
  constructor(private radius: number) {}
  area() { return Math.PI * this.radius * this.radius; }
}

function printArea(shape: Shape) {
  console.log(shape.area().toFixed(2));
}

const sq = new Square(3);
const cir = new Circle(2);
printArea(sq);
printArea(cir);

medium

A. Error: area method missing

B. 6 and 12.56

C. 9.00 and 12.57

D. 9 and 12.56

Solution

1. Step 1: Calculate area of Square

   Square side is 3, so area = 3 * 3 = 9. Output with two decimals is "9.00".

2. Step 2: Calculate area of Circle

   Circle radius is 2, area = π * 2 * 2 ≈ 12.566. Rounded to two decimals is "12.57".

3. Final Answer:

   9.00 and 12.57 -> Option C

4. Quick Check:

   Square area = 9.00, Circle area ≈ 12.57 [OK]

Hint: Calculate areas, then round to 2 decimals [OK]

Common Mistakes:

• Forgetting to round with toFixed(2)
• Using wrong formula for circle area
• Confusing radius and side length

4. Identify the error in this TypeScript code using interfaces and polymorphism:

interface Vehicle {
  move(): void;
}

class Car implements Vehicle {
  move(distance: number) {
    console.log(`Car moved ${distance} meters`);
  }
}

const myCar: Vehicle = new Car();
myCar.move();

medium

A. Missing return type in move method

B. Cannot assign new Car() to Vehicle type

C. Interface Vehicle cannot have methods

D. Method move in Car has a different signature than in Vehicle interface

Solution

1. Step 1: Compare method signatures

   Interface Vehicle defines move() with no parameters. Car's move method requires a number parameter.

2. Step 2: Understand TypeScript method compatibility

   Method signatures must match exactly for interface implementation. Car's move method does not match Vehicle's move method.

3. Final Answer:

   Method move in Car has a different signature than in Vehicle interface -> Option D

4. Quick Check:

   Method signature mismatch = Error [OK]

Hint: Method signatures must match interface exactly [OK]

Common Mistakes:

• Thinking parameter difference is allowed
• Believing assignment to interface type is invalid
• Ignoring method return type requirements

5. You have an interface Logger with a method log(message: string): void. You want to create two classes: ConsoleLogger that logs to the console, and FileLogger that stores logs in an array. How can you use polymorphism to write a function writeLog(logger: Logger, msg: string) that works with both classes? Which implementation is correct?

hard

A. function writeLog(logger: Logger, msg: string) { logger.log(msg); }

B. function writeLog(logger: Logger, msg: string) { console.log(msg); }

C. function writeLog(logger: Logger, msg: string) { logger.write(msg); }

D. function writeLog(logger: Logger, msg: string) { logger.log(); }

Solution

1. Step 1: Understand polymorphism with interfaces

   The function should accept any object implementing Logger and call its log method with the message.

2. Step 2: Check each function implementation

   function writeLog(logger: Logger, msg: string) { logger.log(msg); } calls logger.log(msg) correctly. function writeLog(logger: Logger, msg: string) { console.log(msg); } ignores the passed logger and logs directly to console. function writeLog(logger: Logger, msg: string) { logger.write(msg); } calls a non-existent method write. function writeLog(logger: Logger, msg: string) { logger.log(); } calls log without arguments, which is incorrect.

3. Final Answer:

   function writeLog(logger: Logger, msg: string) { logger.log(msg); } -> Option A

4. Quick Check:

   Call interface method with correct argument [OK]

Hint: Call the interface method with the message parameter [OK]

Common Mistakes:

• Calling wrong method name
• Not passing the message argument
• Ignoring the logger parameter