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.

Practice

1.

What does method overriding mean in TypeScript?

easy

A. A child class provides its own version of a method from the parent class.

B. A child class deletes a method from the parent class.

C. A parent class changes a method from the child class.

D. A method is called without any arguments.

Solution

1. Step 1: Understand method overriding

   Method overriding means a child class replaces a method defined in its parent class with its own version.

2. Step 2: Identify correct description

   A child class provides its own version of a method from the parent class. correctly describes this behavior as the child class providing its own method version.

3. Final Answer:

   A child class provides its own version of a method from the parent class. -> Option A

4. Quick Check:

   Method overriding = child method replaces parent method [OK]

Hint: Child class method replaces parent method behavior [OK]

Common Mistakes:

• Thinking parent changes child methods
• Confusing overriding with deleting methods
• Believing overriding means calling method without arguments

2.

Which of the following is the correct syntax for overriding a method greet() in a child class in TypeScript?

class Parent {
  greet(): string {
    return "Hello";
  }
}

class Child extends Parent {
  ?
}

easy

A. greet() { return 10; }

B. greet(): number { return 5; }

C. greet(name: string): string { return `Hi, ${name}`; }

D. greet(): string { return "Hi"; }

Solution

1. Step 1: Check method signature compatibility

   The child method must have the same name and compatible return type as the parent method. Parent returns string and takes no parameters.

2. Step 2: Identify correct override

   greet(): string { return "Hi"; } matches the parent's method signature exactly (no parameters, returns string). Others differ in return type or parameters.

3. Final Answer:

   greet(): string { return "Hi"; } -> Option D

4. Quick Check:

   Override method signature must match parent [OK]

Hint: Override method must match parent's name and return type [OK]

Common Mistakes:

• Changing return type to number
• Adding parameters not in parent method
• Omitting return type causing implicit any

3.

What will be the output of this TypeScript code?

class Animal {
  speak(): string {
    return "Animal sound";
  }
}

class Dog extends Animal {
  speak(): string {
    return "Bark";
  }
}

const pet: Animal = new Dog();
console.log(pet.speak());

medium

A. "Bark"

B. Error: Method not found

C. undefined

D. "Animal sound"

Solution

1. Step 1: Understand polymorphism with method overriding

   Even though the variable type is Animal, the actual object is Dog. The overridden method in Dog is called.

2. Step 2: Determine method output

   Dog's speak() returns "Bark", so console.log prints "Bark".

3. Final Answer:

   "Bark" -> Option A

4. Quick Check:

   Overridden method runs on actual object type [OK]

Hint: Actual object method runs, not variable type method [OK]

Common Mistakes:

• Thinking parent method runs due to variable type
• Expecting undefined because of type mismatch
• Assuming runtime error for overridden method

4.

Identify the error in this TypeScript code that tries to override a method:

class Vehicle {
  move(distance: number): void {
    console.log(`Moved ${distance} meters`);
  }
}

class Car extends Vehicle {
  move(distance: string): void {
    console.log(`Car moved ${distance}`);
  }
}

medium

A. Child class cannot override methods from parent class.

B. Return type void is not allowed in overriding.

C. Parameter type in child method must match parent method's parameter type.

D. Method name must be different in child class.

Solution

1. Step 1: Check method signature compatibility

   Parent method move() takes a number parameter. Child method move() takes a string parameter, which is incompatible.

2. Step 2: Identify correct error cause

   Parameter type in child method must match parent method's parameter type. correctly states this.

3. Final Answer:

   Parameter type in child method must match parent method's parameter type. -> Option C

4. Quick Check:

   Parameter types must be compatible in overriding [OK]

Hint: Parameter types must match exactly for overriding [OK]

Common Mistakes:

• Changing parameter types in child method
• Thinking return type void is invalid
• Believing method names must differ

5.

Given these classes, which override is valid and why?

class Base {
  calculate(value: number): number {
    return value * 2;
  }
}

class Derived extends Base {
  calculate(value: number): number | string {
    if (value > 10) return "Too large";
    return value * 3;
  }
}

hard

A. Valid because return type includes parent's return type (number) plus string.

B. Invalid because return type must exactly match parent's return type.

C. Invalid because method name changed.

D. Valid because child method can return any type.

Solution

1. Step 1: Check return type compatibility in overriding

   Parent method returns number only. Child method returns number or string, which is not compatible because string is not assignable to number.

2. Step 2: Understand TypeScript's strict method overriding rules

   TypeScript requires the child method's return type to be assignable to the parent's return type, not broader. Invalid because return type must exactly match parent's return type. correctly states this.

3. Final Answer:

   Invalid because return type must exactly match parent's return type. -> Option B

4. Quick Check:

   Return type must be compatible, not broader [OK]

Hint: Child return type must be assignable to parent's return type [OK]

Common Mistakes:

• Allowing broader return types in child method
• Ignoring method name consistency
• Assuming any return type is allowed in override