Class implementing multiple interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a class implementing two interfaces

What will be the output of the following TypeScript code?

Typescript

interface A {
  greet(): string;
}

interface B {
  farewell(): string;
}

class C implements A, B {
  greet() {
    return "Hello";
  }
  farewell() {
    return "Goodbye";
  }
}

const obj = new C();
console.log(obj.greet() + ", " + obj.farewell());

A "Goodbye, Hello"

B "Hello, Goodbye"

C TypeError at runtime

D SyntaxError at compile time

💡 Hint

Check the methods implemented by class C and their return values.

Class C implements both interfaces A and B by providing greet() and farewell() methods. Calling greet() returns "Hello" and farewell() returns "Goodbye", so the combined output is "Hello, Goodbye".

❓ Predict Output

intermediate

Value of property after implementing multiple interfaces

Given the following code, what is the value of obj.status after execution?

Typescript

interface X {
  status: string;
}

interface Y {
  status: string;
}

class Z implements X, Y {
  status = "active";
}

const obj = new Z();

A "active"

B "inactive"

C undefined

D Compilation error due to duplicate property

💡 Hint

Consider how TypeScript handles properties with the same name in multiple interfaces.

Both interfaces declare a property named status of type string. The class Z implements both and defines status as "active". This is valid and obj.status is "active".

🔧 Debug

advanced

Identify the error in class implementing multiple interfaces

What error will this TypeScript code produce?

Typescript

interface First {
  doSomething(): void;
}

interface Second {
  doSomething(): number;
}

class Test implements First, Second {
  doSomething() {
    return 42;
  }
}

A No error, code compiles and runs fine.

B Syntax error: Missing return type in method.

C Runtime error: doSomething returns wrong type.

D TypeScript error: Class incorrectly implements interface 'First'. Type 'number' is not assignable to type 'void'.

💡 Hint

Check the return types of the method in both interfaces and the class.

The method doSomething() in interface First returns void, but in Second it returns number. The class method returns number, which conflicts with First's void return type, causing a TypeScript error.

📝 Syntax

advanced

Correct syntax for implementing multiple interfaces

Which of the following is the correct syntax for a class implementing interfaces Alpha and Beta in TypeScript?

A class MyClass implements Alpha, Beta {}

B class MyClass implements (Alpha & Beta) {}

C class MyClass implements [Alpha, Beta] {}

D class MyClass extends Alpha, Beta {}

💡 Hint

Remember how TypeScript lists multiple interfaces in the implements clause.

The correct syntax uses a comma-separated list of interfaces after implements. Using & or arrays or extends with multiple interfaces is invalid syntax.

🚀 Application

expert

Determine the number of methods in a class implementing multiple interfaces

Given these interfaces and class, how many methods does the class FinalClass have?

Typescript

interface One {
  methodA(): void;
  methodB(): void;
}

interface Two {
  methodB(): void;
  methodC(): void;
}

interface Three {
  methodD(): void;
}

class FinalClass implements One, Two, Three {
  methodA() {}
  methodB() {}
  methodC() {}
  methodD() {}
}

A 5

B 3

C 4

D 2

💡 Hint

Count unique method names implemented in the class.

The class implements all methods from the three interfaces. methodB appears in two interfaces but is implemented once. Total unique methods are methodA, methodB, methodC, methodD = 4.

Practice

1.

What does it mean when a TypeScript class implements multiple interfaces?

Choose the best explanation.

easy

A. The class inherits code from all those interfaces.

B. The class promises to have all methods and properties from all those interfaces.

C. The class can only use one interface at a time.

D. The class automatically creates instances of those interfaces.

Solution

1. Step 1: Understand what interfaces define

   Interfaces describe method and property shapes but do not provide code.

2. Step 2: Understand what implementing multiple interfaces means

   A class implementing multiple interfaces must provide all methods and properties from each interface.

3. Final Answer:

   The class promises to have all methods and properties from all those interfaces. -> Option B

4. Quick Check:

   Implementing multiple interfaces means fulfilling all their contracts [OK]

Hint: Implementing means fulfilling all interface contracts [OK]

Common Mistakes:

• Thinking interfaces provide code to inherit
• Believing a class can only implement one interface
• Confusing interfaces with classes

2.

Which of the following is the correct syntax for a class Car implementing two interfaces Engine and Wheels?

easy

A. class Car implements Engine, Wheels {}

B. class Car extends Engine, Wheels {}

C. class Car implements (Engine & Wheels) {}

D. class Car inherits Engine, Wheels {}

Solution

1. Step 1: Recall TypeScript syntax for multiple interfaces

   Use implements Interface1, Interface2 to implement multiple interfaces.

2. Step 2: Check each option

   class Car implements Engine, Wheels {} uses correct syntax. The options using extends and inherits use invalid keywords. class Car implements (Engine & Wheels) {} uses invalid parentheses and &.

3. Final Answer:

   class Car implements Engine, Wheels {} -> Option A

4. Quick Check:

   Multiple interfaces use comma-separated list after implements [OK]

Hint: Use comma-separated interfaces after implements keyword [OK]

Common Mistakes:

• Using extends instead of implements for interfaces
• Trying to use & or parentheses in implements clause
• Using inherits keyword which doesn't exist

3.

Consider these interfaces and class:

interface A { foo(): string; }
interface B { bar(): number; }

class C implements A, B {
  foo() { return "hello"; }
  bar() { return 42; }
}

const c = new C();
console.log(c.foo(), c.bar());

What is the output?

medium

A. hello 42

B. SyntaxError

C. [object Object] 42

D. "hello 42"

Solution

1. Step 1: Understand method return values

   Method foo() returns string "hello" and bar() returns number 42.

2. Step 2: Understand console.log output

   console.log prints values separated by space without quotes for strings.

3. Final Answer:

   hello 42 -> Option A

4. Quick Check:

   Method returns printed as values without quotes [OK]

Hint: console.log prints string without quotes, separated by spaces [OK]

Common Mistakes:

• Expecting quotes around string output
• Confusing object output with string
• Thinking code causes syntax error

4.

What is wrong with this TypeScript code?

interface X { doX(): void; }
interface Y { doY(): void; }

class Z implements X, Y {
  doX() { console.log("X done"); }
}

medium

A. Method doX() should return a value.

B. Class Z cannot implement two interfaces at once.

C. Class Z must implement method doY() from interface Y.

D. Interfaces cannot be implemented by classes.

Solution

1. Step 1: Check all interface methods

   Interface Y requires method doY() which is missing in class Z.

2. Step 2: Understand TypeScript rules for implementing interfaces

   A class must implement all methods from all interfaces it declares.

3. Final Answer:

   Class Z must implement method doY() from interface Y. -> Option C

4. Quick Check:

   All interface methods must be implemented [OK]

Hint: Implement all methods from every interface listed [OK]

Common Mistakes:

• Thinking partial implementation is allowed
• Confusing interfaces with classes
• Believing interfaces provide code

5.

You have these interfaces:

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

Write a class AllInOne that implements both interfaces and stores the last scanned text in a property lastScan. Which code snippet correctly implements this?

hard

A. class AllInOne implements Printer, Scanner {
lastScan = "";
print() { console.log("Printing..."); }
}

B. class AllInOne implements Printer, Scanner {
print() { console.log("Printing..."); }
scan() { return "document"; }
}

C. class AllInOne implements Printer, Scanner {
lastScan: string;
print() { console.log("Printing..."); }
scan() { return this.lastScan; }
}

D. class AllInOne implements Printer, Scanner {
lastScan = "";
print() { console.log("Printing..."); }
scan() { this.lastScan = "document"; return this.lastScan; }
}

Solution

1. Step 1: Check interface methods implemented

   Printer requires print(), Scanner requires scan(). class AllInOne implements Printer, Scanner { lastScan = ""; print() { console.log("Printing..."); } scan() { this.lastScan = "document"; return this.lastScan; } } implements both.

2. Step 2: Check lastScan property usage

   class AllInOne implements Printer, Scanner { lastScan = ""; print() { console.log("Printing..."); } scan() { this.lastScan = "document"; return this.lastScan; } } initializes lastScan and updates it inside scan(), fulfilling the requirement.

3. Final Answer:

   class AllInOne implements Printer, Scanner { lastScan = ""; print() { console.log("Printing..."); } scan() { this.lastScan = "document"; return this.lastScan; } } -> Option D

4. Quick Check:

   Implement all methods and update lastScan property [OK]

Hint: Implement all methods and update properties as required [OK]

Common Mistakes:

• Omitting one interface method
• Not updating lastScan property
• Declaring property but not initializing or updating it