Class implementing multiple interfaces in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for a class to implement multiple interfaces in TypeScript?

It means the class agrees to provide all the properties and methods defined in all the interfaces it implements. This helps ensure the class meets multiple contracts or behaviors.

beginner

How do you declare a class that implements two interfaces named <code>InterfaceA</code> and <code>InterfaceB</code>?

You write: <br><code>class MyClass implements InterfaceA, InterfaceB { /* implementation */ }</code>

intermediate

Can a class implement interfaces that have overlapping method names? What happens?

Yes, a class can implement interfaces with overlapping method names. The class must provide one implementation that satisfies all interfaces for that method.

intermediate

Why use multiple interfaces instead of a single big interface?

Using multiple smaller interfaces helps keep code organized and flexible. Classes can pick only the behaviors they need, making code easier to maintain and understand.

beginner

Example: What will this code output?<br><pre>interface A { greet(): void; }<br>interface B { farewell(): void; }<br>class Person implements A, B {<br>  greet() { console.log('Hello!'); }<br>  farewell() { console.log('Goodbye!'); }<br>}<br>const p = new Person();<br>p.greet();<br>p.farewell();</pre>

The output will be:<br><pre>Hello!<br>Goodbye!</pre><br>Because the class implements both interfaces and provides both methods.

How do you specify that a class implements multiple interfaces in TypeScript?

A List interfaces inside curly braces after the class name

B Separate interface names with commas after the 'implements' keyword

C Use the 'extends' keyword with multiple interfaces

D Use multiple 'implements' keywords, one per interface

In TypeScript, you list multiple interfaces separated by commas after the 'implements' keyword.

If two interfaces have a method with the same name but different return types, what happens when a class implements both?

A The class can implement only one interface's method

B TypeScript allows conflicting return types without error

C The compiler automatically merges the return types

D The class must provide a method compatible with both interfaces

The class must provide a method that satisfies both interfaces, so the method must be compatible with both return types.

Which of these is a benefit of implementing multiple interfaces?

A Allows a class to have multiple inheritance of implementation

B Automatically generates method implementations

C Enforces a class to follow multiple contracts or behaviors

D Prevents a class from having any methods

Implementing multiple interfaces enforces that a class follows multiple contracts or behaviors.

Can interfaces in TypeScript contain method implementations?

A No, interfaces only declare method signatures

B Yes, interfaces can have full method bodies

C Only if marked with 'default' keyword

D Only in classes, not interfaces

Interfaces only declare method signatures; they do not contain implementations.

What keyword is used to declare that a class follows an interface?

A implements

B extends

C uses

D inherits

The 'implements' keyword declares that a class follows an interface.

Explain how a class can implement multiple interfaces in TypeScript and why this is useful.

Think about how a class promises to have behaviors from more than one source.

Describe what happens if two interfaces have methods with the same name and a class implements both.

Consider how one method can fulfill multiple contracts.

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