Method overriding with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of overridden method with different return types

What is the output of the following TypeScript code when calling child.getValue()?

Typescript

class Parent {
  getValue(): number {
    return 42;
  }
}

class Child extends Parent {
  getValue(): string {
    return "Hello";
  }
}

const child = new Child();
console.log(child.getValue());

A TypeScript compilation error due to return type mismatch

B 42

C "Hello"

D Runtime error: TypeError

💡 Hint

Check how TypeScript handles method overriding with different return types in subclasses.

TypeScript requires overriding methods to have covariant return types: the subclass return type must be assignable to the base class return type. String is not assignable to number, causing a compilation error.

❓ Predict Output

intermediate

Output when overriding method with covariant parameter types

What will be the output of this TypeScript code snippet?

Typescript

class Animal {
  speak(sound: string): string {
    return `Animal says ${sound}`;
  }
}

class Dog extends Animal {
  speak(sound: "bark" | "woof"): string {
    return `Dog says ${sound}`;
  }
}

const dog = new Dog();
console.log(dog.speak("bark"));

A Animal says bark

B TypeScript error: Parameter type is not compatible

C Dog says bark

D Runtime error: Argument type mismatch

💡 Hint

Look at how the parameter type is narrowed in the subclass method.

TypeScript requires contravariant parameters for overriding methods: the subclass parameter type must be a supertype of the base parameter type. '"bark" | "woof"' is narrower (subtype), so incompatible, causing a TypeScript error.

🔧 Debug

advanced

Identify the error in method overriding with incompatible return types

Which option correctly identifies the error in this TypeScript code?

Typescript

class Base {
  calculate(): number {
    return 10;
  }
}

class Derived extends Base {
  calculate(): boolean {
    return true;
  }
}

A Runtime error: Type mismatch when calling calculate()

B No error, code compiles and runs fine

C TypeScript error: Return type 'boolean' is not assignable to return type 'number' in base class

D Syntax error: Missing colon in method declaration

💡 Hint

Check if the return type in the subclass method matches the base class method.

TypeScript enforces that an overriding method must have a return type compatible with the base method. Here, the Derived class returns a boolean while the base returns a number, causing a compilation error.

📝 Syntax

advanced

Which method override syntax is valid in TypeScript?

Given the base class method process(data: string): void, which subclass method override is syntactically valid?

Typescript

class Processor {
  process(data: string): void {
    console.log(data);
  }
}

class CustomProcessor extends Processor {
  // Which override is valid?
}

A process(data: string): void { console.log(data.toUpperCase()); }

B process(data: number): void { console.log(data); }

C process(data: string): string { return data.toLowerCase(); }

D process(): void { console.log('No data'); }

💡 Hint

The overriding method must have compatible parameter and return types.

Option A matches the base method signature exactly and is valid. Option A changes parameter type, causing error. Option A changes return type from void to string, causing error. Option A removes the parameter, causing error.

🚀 Application

expert

Determine the output with method overriding and union types

What is the output of this TypeScript code?

Typescript

class Vehicle {
  move(speed: number | string): string {
    return `Moving at ${speed}`;
  }
}

class Car extends Vehicle {
  move(speed: number): string {
    return `Car moving at ${speed} km/h`;
  }
}

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

A Runtime error: Method not found

B Moving at 100

C Car moving at 100 km/h

D TypeScript error: Parameter type mismatch in override

💡 Hint

Consider how TypeScript resolves method calls with union types and overriding.

TypeScript requires contravariant parameters for overrides. The Car class uses a narrower parameter type (number vs. number | string), making 'number | string' not assignable to 'number', causing a compilation error.