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.

Practice

1. What does the implements keyword do in a TypeScript class?

easy

A. It ensures the class follows the structure defined by an interface.

B. It creates a new interface inside the class.

C. It imports an interface from another file.

D. It automatically generates methods for the class.

Solution

1. Step 1: Understand the role of interfaces

   Interfaces define a contract of properties and methods that a class must have.

2. Step 2: Role of implements keyword

   The implements keyword makes sure the class follows that contract exactly.

3. Final Answer:

   It ensures the class follows the structure defined by an interface. -> Option A

4. Quick Check:

   implements enforces interface structure [OK]

Hint: Remember: implements means 'follow the interface rules' [OK]

Common Mistakes:

• Thinking implements creates or imports interfaces
• Believing implements auto-generates code
• Confusing implements with extends

2. Which of the following is the correct syntax to make a class Car implement an interface Vehicle?

easy

A. interface Car implements Vehicle {}

B. class Car implements Vehicle {}

C. class Car extends Vehicle {}

D. class Car uses Vehicle {}

Solution

1. Step 1: Identify correct keywords for class and interface

   Classes use the keyword implements to follow interfaces.

2. Step 2: Check syntax correctness

   class Car implements Vehicle {} is the correct way to declare this.

3. Final Answer:

   class Car implements Vehicle {} -> Option B

4. Quick Check:

   Class uses implements for interfaces [OK]

Hint: Use 'implements' keyword after class name for interfaces [OK]

Common Mistakes:

• Using extends instead of implements for interfaces
• Trying to implement interface in interface declaration
• Using 'uses' keyword which doesn't exist

3. What will be the output of this code?

interface Animal {
  name: string;
  speak(): string;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    return `${this.name} says woof`;
  }
}

const dog = new Dog('Buddy');
console.log(dog.speak());

medium

A. undefined

B. "Dog says woof"

C. "Buddy says woof"

D. Error: Dog does not implement speak()

Solution

1. Step 1: Check class implements interface correctly

   Dog class has property name and method speak() as required.

2. Step 2: Understand method output

   speak() returns a string with the dog's name and 'says woof'.

3. Final Answer:

   "Buddy says woof" -> Option C

4. Quick Check:

   Method returns correct string with name [OK]

Hint: Look for method return values matching console.log output [OK]

Common Mistakes:

• Assuming missing method error when method exists
• Confusing property values with method output
• Ignoring string template usage

4. Identify the error in this code:

interface Shape {
  area(): number;
}

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

medium

A. Method area() returns string instead of number.

B. Missing constructor in Circle class.

C. radius property is not declared.

D. Circle should extend Shape, not implement.

Solution

1. Step 1: Check interface method signature

   Interface Shape requires area() to return a number.

2. Step 2: Compare with class method return type

   Circle's area() returns a string because toFixed() returns string.

3. Final Answer:

   Method area() returns string instead of number. -> Option A

4. Quick Check:

   Return type must match interface [OK]

Hint: Match method return types exactly with interface [OK]

Common Mistakes:

• Returning string when interface expects number
• Forgetting to declare properties
• Using extends instead of implements for interfaces

5. You have two interfaces:

interface Printer {
  print(): void;
}
interface Scanner {
  scan(): void;
}

How can you create a class AllInOneMachine that implements both interfaces correctly?

hard

A. interface AllInOneMachine implements Printer, Scanner {}

B. class AllInOneMachine implements Printer {
print() { console.log('Printing'); }
scan() { console.log('Scanning'); }
}

C. class AllInOneMachine extends Printer, Scanner {
print() { console.log('Printing'); }
scan() { console.log('Scanning'); }
}

D. class AllInOneMachine implements Printer, Scanner {
print() { console.log('Printing'); }
scan() { console.log('Scanning'); }
}

Solution

1. Step 1: Understand multiple interface implementation

   TypeScript allows a class to implement multiple interfaces separated by commas.

2. Step 2: Check class methods match all interfaces

   Class must have both print() and scan() methods.

3. Final Answer:

   class AllInOneMachine implements Printer, Scanner { print() { console.log('Printing'); } scan() { console.log('Scanning'); } } -> Option D

4. Quick Check:

   Multiple interfaces implemented with comma [OK]

Hint: Use comma to implement multiple interfaces in one class [OK]

Common Mistakes:

• Using extends instead of implements for interfaces
• Implementing only one interface but adding all methods
• Trying to implement interfaces in interface declaration