Class implementing multiple interfaces in Typescript - Mini Project: Build & Apply

Class implementing multiple interfaces

📖 Scenario: Imagine you are building a simple system to manage electronic devices. Each device can have different features like playing music and making calls. We want to organize these features using interfaces and then create a class that implements both.

🎯 Goal: Create two interfaces called MusicPlayer and Phone with specific methods. Then create a class called SmartDevice that implements both interfaces. Finally, create an instance of SmartDevice and call its methods to see the output.

📋 What You'll Learn

Create an interface called MusicPlayer with a method playMusic() that returns void.

Create an interface called Phone with a method makeCall(number: string) that returns void.

Create a class called SmartDevice that implements both MusicPlayer and Phone.

Inside SmartDevice, implement playMusic() to print "Playing music...".

Inside SmartDevice, implement makeCall(number: string) to print "Calling {number}..." using the given number.

Create an instance of SmartDevice called myDevice.

Call playMusic() and makeCall("123-456-7890") on myDevice and print the outputs.

💡 Why This Matters

🌍 Real World

In real life, devices often have multiple features. Using interfaces helps organize these features clearly and lets classes combine them as needed.

💼 Career

Understanding how to implement multiple interfaces is important for building flexible and maintainable code in TypeScript, a popular language for web and app development.

1

Create interfaces MusicPlayer and Phone

Create an interface called MusicPlayer with a method playMusic() that returns void. Also create an interface called Phone with a method makeCall(number: string) that returns void.

Typescript

# Your code here

Hint

Use the interface keyword to define interfaces. Methods inside interfaces only have signatures without bodies.

2

Create class SmartDevice implementing both interfaces

Create a class called SmartDevice that implements both MusicPlayer and Phone.

Typescript

interface MusicPlayer {
    playMusic(): void;
}

interface Phone {
    makeCall(number: string): void;
}

# Your code here

Hint

Use implements keyword followed by both interface names separated by a comma.

3

Implement methods playMusic and makeCall in SmartDevice

Inside the SmartDevice class, implement the playMusic() method to print "Playing music...". Implement the makeCall(number: string) method to print "Calling {number}..." using the given number.

Typescript

interface MusicPlayer {
    playMusic(): void;
}

interface Phone {
    makeCall(number: string): void;
}

class SmartDevice implements MusicPlayer, Phone {
    playMusic(): void {
        // Print "Playing music..." here
    }
    makeCall(number: string): void {
        // Print "Calling {number}..." here
    }
}

# Your code here

Hint

Use console.log to print messages. Use backticks ` and ${} to insert variables inside strings.

4

Create instance and call methods

Create an instance of SmartDevice called myDevice. Then call playMusic() and makeCall("123-456-7890") on myDevice.

Typescript

interface MusicPlayer {
    playMusic(): void;
}

interface Phone {
    makeCall(number: string): void;
}

class SmartDevice implements MusicPlayer, Phone {
    playMusic(): void {
        console.log("Playing music...");
    }
    makeCall(number: string): void {
        console.log(`Calling ${number}...`);
    }
}

# Create instance myDevice and call methods below

Hint

Create the instance using new SmartDevice(). Then call the methods on this instance.

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