Polymorphism through interfaces in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Shape with a method area.

Typescript

interface Shape {
  [1](): number;
}

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

Asize

Barea

Ccalculate

Dperimeter

Attempts:

3 left

💡 Hint

Common Mistakes

Using method names unrelated to area like 'size' or 'perimeter'.

Forgetting to specify the return type.

The interface Shape requires a method named area that returns a number.

2fill in blank

medium

Complete the class Circle to implement the Shape interface with the area method.

Typescript

class Circle implements Shape {
  radius: number;
  constructor(radius: number) {
    this.radius = radius;
  }
  [1](): number {
    return Math.PI * this.radius * this.radius;
  }
}

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

Aarea

BcalculateArea

CgetArea

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different method name than the interface requires.

Not returning a number.

The class must implement the area method exactly as declared in the interface.

3fill in blank

hard

Fix the error in the Rectangle class so it correctly implements the Shape interface.

Typescript

class Rectangle implements Shape {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
  [1](): number {
    return this.width * this.height;
  }
}

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

AcalculateArea

BgetArea

Carea

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name different from the interface.

Misspelling the method name.

The method name must be area to satisfy the interface contract.

4fill in blank

hard

Fill both blanks to create a function that accepts any Shape and returns its area.

Typescript

function getArea([1]: [2]): number {
  return shape.area();
}

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

Ashape

BShape

Cany

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic type like 'any' instead of the interface.

Using a non-descriptive parameter name.

The function parameter name is shape and its type is the interface Shape.

5fill in blank

hard

Fill all three blanks to create an array of Shape objects and calculate the total area.

Typescript

const shapes: [1][] = [new Circle(5), new Rectangle(4, 6)];
let totalArea = 0;
for (const [2] of shapes) {
  totalArea += [3].area();
}

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

AShape

Bshape

DObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect type names like 'Object' instead of 'Shape'.

Using inconsistent variable names in the loop.

The array type is Shape, the loop variable is shape, and we call shape.area() to sum areas.

Practice

1. What does polymorphism through interfaces allow in TypeScript?

easy

A. Only one class can implement an interface

B. Different classes to be treated the same if they implement the same interface

C. Interfaces can hold data like variables

D. Classes cannot implement more than one interface

Solution

1. Step 1: Understand polymorphism concept

   Polymorphism means using different objects in the same way if they share a common interface.

2. Step 2: Apply to interfaces in TypeScript

   Interfaces define methods that classes promise to implement, allowing different classes to be used interchangeably.

3. Final Answer:

   Different classes to be treated the same if they implement the same interface -> Option B

4. Quick Check:

   Polymorphism = Same interface, different classes [OK]

Hint: Polymorphism means same interface, different class objects [OK]

Common Mistakes:

• Thinking interfaces hold data like variables
• Believing only one class can implement an interface
• Assuming classes can't implement multiple interfaces

2. Which of the following is the correct syntax for a TypeScript interface with a method speak() that returns a string?

easy

A. interface Animal { speak(): string; }

B. interface Animal { speak: string(); }

C. interface Animal { speak() => string; }

D. interface Animal { speak: () => string; }

Solution

1. Step 1: Review interface method syntax

   In TypeScript, methods in interfaces are declared as methodName(): returnType;.

2. Step 2: Check each option

   interface Animal { speak(): string; } correctly uses speak(): string;. interface Animal { speak: string(); } incorrectly places parentheses after the type. interface Animal { speak() => string; } uses arrow syntax wrongly. interface Animal { speak: () => string; } uses a function type, which is valid but less common for method declarations.

3. Final Answer:

   interface Animal { speak(): string; } -> Option A

4. Quick Check:

   Method syntax = methodName(): returnType [OK]

Hint: Method in interface uses colon after name, not arrow [OK]

Common Mistakes:

• Using arrow syntax inside interface method
• Putting parentheses after type instead of method name
• Confusing function type with method declaration

3. What will be the output of this TypeScript code?

interface Shape {
  area(): number;
}

class Square implements Shape {
  constructor(private side: number) {}
  area() { return this.side * this.side; }
}

class Circle implements Shape {
  constructor(private radius: number) {}
  area() { return Math.PI * this.radius * this.radius; }
}

function printArea(shape: Shape) {
  console.log(shape.area().toFixed(2));
}

const sq = new Square(3);
const cir = new Circle(2);
printArea(sq);
printArea(cir);

medium

A. Error: area method missing

B. 6 and 12.56

C. 9.00 and 12.57

D. 9 and 12.56

Solution

1. Step 1: Calculate area of Square

   Square side is 3, so area = 3 * 3 = 9. Output with two decimals is "9.00".

2. Step 2: Calculate area of Circle

   Circle radius is 2, area = π * 2 * 2 ≈ 12.566. Rounded to two decimals is "12.57".

3. Final Answer:

   9.00 and 12.57 -> Option C

4. Quick Check:

   Square area = 9.00, Circle area ≈ 12.57 [OK]

Hint: Calculate areas, then round to 2 decimals [OK]

Common Mistakes:

• Forgetting to round with toFixed(2)
• Using wrong formula for circle area
• Confusing radius and side length

4. Identify the error in this TypeScript code using interfaces and polymorphism:

interface Vehicle {
  move(): void;
}

class Car implements Vehicle {
  move(distance: number) {
    console.log(`Car moved ${distance} meters`);
  }
}

const myCar: Vehicle = new Car();
myCar.move();

medium

A. Missing return type in move method

B. Cannot assign new Car() to Vehicle type

C. Interface Vehicle cannot have methods

D. Method move in Car has a different signature than in Vehicle interface

Solution

1. Step 1: Compare method signatures

   Interface Vehicle defines move() with no parameters. Car's move method requires a number parameter.

2. Step 2: Understand TypeScript method compatibility

   Method signatures must match exactly for interface implementation. Car's move method does not match Vehicle's move method.

3. Final Answer:

   Method move in Car has a different signature than in Vehicle interface -> Option D

4. Quick Check:

   Method signature mismatch = Error [OK]

Hint: Method signatures must match interface exactly [OK]

Common Mistakes:

• Thinking parameter difference is allowed
• Believing assignment to interface type is invalid
• Ignoring method return type requirements

5. You have an interface Logger with a method log(message: string): void. You want to create two classes: ConsoleLogger that logs to the console, and FileLogger that stores logs in an array. How can you use polymorphism to write a function writeLog(logger: Logger, msg: string) that works with both classes? Which implementation is correct?

hard

A. function writeLog(logger: Logger, msg: string) { logger.log(msg); }

B. function writeLog(logger: Logger, msg: string) { console.log(msg); }

C. function writeLog(logger: Logger, msg: string) { logger.write(msg); }

D. function writeLog(logger: Logger, msg: string) { logger.log(); }

Solution

1. Step 1: Understand polymorphism with interfaces

   The function should accept any object implementing Logger and call its log method with the message.

2. Step 2: Check each function implementation

   function writeLog(logger: Logger, msg: string) { logger.log(msg); } calls logger.log(msg) correctly. function writeLog(logger: Logger, msg: string) { console.log(msg); } ignores the passed logger and logs directly to console. function writeLog(logger: Logger, msg: string) { logger.write(msg); } calls a non-existent method write. function writeLog(logger: Logger, msg: string) { logger.log(); } calls log without arguments, which is incorrect.

3. Final Answer:

   function writeLog(logger: Logger, msg: string) { logger.log(msg); } -> Option A

4. Quick Check:

   Call interface method with correct argument [OK]

Hint: Call the interface method with the message parameter [OK]

Common Mistakes:

• Calling wrong method name
• Not passing the message argument
• Ignoring the logger parameter