Class implementing multiple interfaces in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a class that implements two interfaces.

Typescript

interface A {
  methodA(): void;
}

interface B {
  methodB(): void;
}

class MyClass implements [1] {
  methodA() {
    console.log('A');
  }
  methodB() {
    console.log('B');
  }
}

Drag options to blanks, or click blank then click option'

AA B

BA, B

CA | B

DA & B

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or '|' instead of commas to separate interfaces.

Omitting the comma between interfaces.

In TypeScript, to implement multiple interfaces, list them separated by commas.

2fill in blank

medium

Complete the code to correctly declare the class implementing interfaces with methods.

Typescript

interface Printable {
  print(): void;
}

interface Scannable {
  scan(): void;
}

class MultiFunctionDevice implements Printable, [1] {
  print() {
    console.log('Printing');
  }
  scan() {
    console.log('Scanning');
  }
}

Drag options to blanks, or click blank then click option'

ACopyable

BWritable

CReadable

DScannable

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing an interface that is not declared or unrelated.

Confusing interface names.

The class implements both Printable and Scannable interfaces, so the second interface is Scannable.

3fill in blank

hard

Fix the error in the class declaration to correctly implement two interfaces.

Typescript

interface X {
  doX(): void;
}

interface Y {
  doY(): void;
}

class XYDevice implements X [1] Y {
  doX() {
    console.log('X');
  }
  doY() {
    console.log('Y');
  }
}

Drag options to blanks, or click blank then click option'

A,

B&

C|

Dand

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' or '|' instead of commas.

Writing 'and' as a separator.

Interfaces are separated by commas in the implements clause, not by & or |.

4fill in blank

hard

Fill both blanks to complete the class implementing two interfaces with properties.

Typescript

interface HasName {
  name: string;
}

interface HasAge {
  age: number;
}

class Person implements [1], [2] {
  constructor(public name: string, public age: number) {}
}

Drag options to blanks, or click blank then click option'

AHasName

BHasAge

CHasJob

DHasAddress

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing interfaces not related to the properties.

Mixing up interface names.

The class Person implements HasName and HasAge interfaces as it has name and age properties.

5fill in blank

hard

Fill all three blanks to complete the class implementing interfaces with methods and properties.

Typescript

interface CanRun {
  run(): void;
}

interface CanJump {
  jump(): void;
}

class Athlete implements [1], [2] {
  constructor(public speed: number) {}
  [3]() {
    console.log('Running fast');
  }
  jump() {
    console.log('Jumping high');
  }
}

Drag options to blanks, or click blank then click option'

ACanRun

BCanJump

Crun

Djump

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong interface names in implements.

Misspelling method names.

The class implements CanRun and CanJump interfaces. The method run() is defined with the correct name.

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