Class implementing multiple interfaces in Typescript

Introduction

Using multiple interfaces lets a class promise to do many different jobs. This helps organize code and makes it clear what the class can do.

When a class needs to follow rules from more than one source.

When you want to combine different abilities into one class.

When you want to make sure a class has certain methods from different groups.

When designing flexible and reusable code parts.

When you want to separate what a class does into clear sections.

Syntax

Typescript

interface Interface1 {
  method1(): void;
}

interface Interface2 {
  method2(): void;
}

class MyClass implements Interface1, Interface2 {
  method1(): void {
    // code for method1
  }

  method2(): void {
    // code for method2
  }
}

You list multiple interfaces separated by commas after implements.

The class must provide all methods from all interfaces it implements.

Examples

This class Duck promises to fly and swim by implementing both interfaces.

Typescript

interface Flyer {
  fly(): void;
}

interface Swimmer {
  swim(): void;
}

class Duck implements Flyer, Swimmer {
  fly(): void {
    console.log("Duck is flying");
  }
  swim(): void {
    console.log("Duck is swimming");
  }
}

The Book class can both read and write text by following two interfaces.

Typescript

interface Reader {
  read(): string;
}

interface Writer {
  write(text: string): void;
}

class Book implements Reader, Writer {
  private content = "";
  read(): string {
    return this.content;
  }
  write(text: string): void {
    this.content += text;
  }
}

Sample Program

This program shows a class ConsoleLogger that can both log messages and handle errors by implementing two interfaces.

Typescript

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

interface ErrorHandler {
  handleError(error: string): void;
}

class ConsoleLogger implements Logger, ErrorHandler {
  log(message: string): void {
    console.log(`Log: ${message}`);
  }

  handleError(error: string): void {
    console.error(`Error: ${error}`);
  }
}

const logger = new ConsoleLogger();
logger.log("Application started");
logger.handleError("File not found");

Important Notes

Interfaces only describe what methods a class should have, not how they work.

A class can implement any number of interfaces to combine features.

If you forget to add a method from an interface, TypeScript will show an error.

Summary

Classes can promise to do many things by implementing multiple interfaces.

This helps keep code organized and clear.

Always implement all methods from every interface you list.

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