Polymorphism through interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of polymorphic method calls

What is the output of the following TypeScript code?

Typescript

interface Animal {
  speak(): string;
}

class Dog implements Animal {
  speak(): string {
    return "Woof!";
  }
}

class Cat implements Animal {
  speak(): string {
    return "Meow!";
  }
}

function makeSpeak(animal: Animal) {
  console.log(animal.speak());
}

const dog = new Dog();
const cat = new Cat();
makeSpeak(dog);
makeSpeak(cat);

A Woof!\nWoof!

B Woof!\nMeow!

C Meow!\nWoof!

D Meow!\nMeow!

💡 Hint

Look at which class instance is passed to makeSpeak and what speak() returns.

The makeSpeak function calls the speak() method of the passed Animal instance. Since dog is a Dog instance, it returns "Woof!". The cat instance returns "Meow!".

🧠 Conceptual

intermediate

Understanding interface polymorphism

Which statement best describes polymorphism through interfaces in TypeScript?

A Different classes can implement the same interface and provide their own method behavior.

B Interfaces can only be used for type checking and cannot enforce method signatures.

C An interface can inherit implementation from another interface.

D Polymorphism means a class can have multiple constructors.

💡 Hint

Think about how different classes can share the same method names but behave differently.

Polymorphism through interfaces means that multiple classes implement the same interface but provide their own unique behavior for the interface's methods.

🔧 Debug

advanced

Identify the runtime error in polymorphic code

What error will this TypeScript code produce when run?

Typescript

interface Shape {
  area(): number;
}

class Rectangle implements Shape {
  constructor(public width: number, public height: number) {}
  area(): number {
    return this.width * this.height;
  }
}

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

const shapes: Shape[] = [new Rectangle(5, 10), new Circle(3)];

shapes.forEach(shape => {
  if (shape instanceof Rectangle) {
    console.log(shape.area());
  } else {
    console.log(shape.diameter());
  }
});

A ReferenceError: shape is not defined

B No error, outputs area of rectangle and circle

C SyntaxError due to missing method in interface

D TypeError: shape.diameter is not a function

💡 Hint

Check if all methods called on shape exist in the classes.

The Circle class does not have a diameter() method, so calling shape.diameter() causes a runtime TypeError.

📝 Syntax

advanced

Correct interface implementation syntax

Which option correctly implements the Vehicle interface with a move() method?

Typescript

interface Vehicle {
  move(): string;
}

A

class Car implements Vehicle {
  move(): void {
    console.log("Car is moving");
  }
}

B

class Car implements Vehicle {
  move: () => "Car is moving";
}

C

class Car implements Vehicle {
  move() {
    return "Car is moving";
  }
}

D

class Car implements Vehicle {
  move(): string {
    console.log("Car is moving");
  }
}

💡 Hint

Check the method signature and return type matching the interface.

Option C correctly implements move() returning a string as required. Option C uses incorrect syntax for method implementation. Option C returns void instead of string. Option C returns undefined because it logs but does not return a string.

🚀 Application

expert

Determine output with polymorphic array processing

Given the following code, what is the output?

Typescript

interface Logger {
  log(message: string): string;
}

class ConsoleLogger implements Logger {
  log(message: string): string {
    return `Console: ${message}`;
  }
}

class FileLogger implements Logger {
  log(message: string): string {
    return `File: ${message}`;
  }
}

function processLoggers(loggers: Logger[], msg: string): string[] {
  return loggers.map(logger => logger.log(msg));
}

const loggers: Logger[] = [new ConsoleLogger(), new FileLogger()];
const results = processLoggers(loggers, "Test message");
console.log(results.join(", "));

A Console: Test message, File: Test message

B File: Test message, Console: Test message

C ["Console: Test message", "File: Test message"]

D TypeError: logger.log is not a function

💡 Hint

Look at the order of loggers in the array and what their log methods return.

The processLoggers function calls log on each logger in order. The first is ConsoleLogger returning "Console: Test message", the second is FileLogger returning "File: Test message". The output joins these with a comma and space.