Why Polymorphism through interfaces in Typescript? - Purpose & Use Cases

The Big Idea

What if you could control many different things with just one simple command?

The Scenario

Imagine you have different types of devices like a phone, a tablet, and a laptop. You want to turn them all on, but each device has its own way to do it. Without a common plan, you have to write separate code for each device every time.

The Problem

Writing separate code for each device is slow and confusing. If you add a new device, you must change many parts of your program. This makes mistakes easy and your code hard to manage.

The Solution

Using interfaces, you create a shared plan that all devices follow. This way, you can treat all devices the same way in your code, even if they work differently inside. It keeps your code clean and easy to grow.

Before vs After

✗ Before

phone.turnOn();
tablet.powerUp();
laptop.start();

✓ After

device.turnOn(); // device can be phone, tablet, or laptop

What It Enables

It lets you write flexible code that works with many different things without changing your main program.

Real Life Example

Think of a music app that plays songs from different sources: local files, streaming services, or radio. Using interfaces, the app can play any source without knowing the details.

Key Takeaways

Interfaces create a common plan for different objects.

Polymorphism lets you use different objects in the same way.

This makes your code easier to write, read, and extend.

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