Implementing interfaces in classes in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a class implementing an interface

What is the output of this TypeScript code when the greet method is called?

Typescript

interface Greeter {
  greet(): string;
}

class FriendlyGreeter implements Greeter {
  greet(): string {
    return "Hello, friend!";
  }
}

const greeter = new FriendlyGreeter();
console.log(greeter.greet());

A "Hello, friend!"

B undefined

C TypeError: greeter.greet is not a function

D SyntaxError

💡 Hint

Remember that the class implements the interface and provides the greet method.

The class FriendlyGreeter implements the Greeter interface and defines the greet method returning the string "Hello, friend!". Calling greeter.greet() prints this string.

🧠 Conceptual

intermediate

Interface method implementation requirement

Which statement about implementing interfaces in TypeScript classes is true?

A A class must implement all methods declared in the interface it implements.

B Interfaces automatically add methods to the class without implementation.

C A class can implement methods with different names than those in the interface.

D A class can implement only some methods of the interface and skip others.

💡 Hint

Think about what happens if a class does not implement all interface methods.

In TypeScript, a class that implements an interface must provide concrete implementations for all methods declared in that interface. Otherwise, TypeScript will report an error.

🔧 Debug

advanced

Identify the error in interface implementation

What error will this TypeScript code produce?

Typescript

interface Animal {
  makeSound(): void;
}

class Dog implements Animal {
  makeSound(sound: string): void {
    console.log(sound);
  }
}

A No error, code runs fine.

B Error: Class 'Dog' incorrectly implements interface 'Animal'. Types of property 'makeSound' are incompatible.

C Error: Missing return statement in method 'makeSound'.

D Error: Interface 'Animal' cannot be implemented by class 'Dog'.

💡 Hint

Check the method signature in the class versus the interface.

The interface declares makeSound with no parameters, but the class method expects one parameter. This mismatch causes a TypeScript error about incompatible types.

📝 Syntax

advanced

Correct syntax for implementing multiple interfaces

Which option shows the correct way to implement two interfaces Flyer and Swimmer in a class Duck?

A

class Duck implements {Flyer, Swimmer} {
  fly() {}
  swim() {}
}

B

class Duck implements [Flyer, Swimmer] {
  fly() {}
  swim() {}
}

C

class Duck implements Flyer, Swimmer {
  fly() {}
  swim() {}
}

D

class Duck implements Flyer & Swimmer {
  fly() {}
  swim() {}
}

💡 Hint

Look at the syntax for multiple interface implementation in TypeScript.

In TypeScript, multiple interfaces are implemented by listing them separated by commas after the implements keyword without brackets or braces.

🚀 Application

expert

Determine the output of interface and class interaction

Given the following code, what will be the output when console.log(vehicle.describe()) is executed?

Typescript

interface Vehicle {
  speed: number;
  describe(): string;
}

class Car implements Vehicle {
  speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
  describe(): string {
    return `Car speed is ${this.speed} km/h`;
  }
}

const vehicle: Vehicle = new Car(120);
console.log(vehicle.describe());

A undefined

B "Vehicle speed is 120 km/h"

C TypeError: vehicle.describe is not a function

D "Car speed is 120 km/h"

💡 Hint

Check how the class implements the interface and what the describe method returns.

The Car class implements Vehicle and its describe method returns the string with the speed. The instance vehicle calls describe and outputs the string with speed 120.