Method overriding with types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is method overriding in TypeScript?

Method overriding is when a subclass provides its own version of a method that is already defined in its parent class. This allows the subclass to change or extend the behavior of that method.

beginner

How does TypeScript help with method overriding and types?

TypeScript checks that the overriding method in the subclass has a compatible type signature with the method in the parent class. This means the parameters and return type should match or be compatible to avoid errors.

intermediate

Can the overriding method in TypeScript have different parameter types than the parent method?

No, the overriding method must have parameters that are compatible with the parent method's parameters. Changing parameter types can cause type errors because it breaks the expected method contract.

intermediate

What happens if the overriding method returns a different type than the parent method in TypeScript?

TypeScript will show an error if the return type is not compatible. The overriding method's return type must be the same or a subtype of the parent's return type to keep type safety.

beginner

Example: How to override a method with types in TypeScript?

class Animal { speak(): string { return "..."; } } class Dog extends Animal { speak(): string { return "Woof!"; } } Here, Dog overrides speak() with the same return type string.

In TypeScript, what must the overriding method's parameter types be compared to the parent method?

A Less parameters only

B Compatible or the same

C More parameters only

D Completely different

The overriding method must have parameter types compatible with the parent method to maintain type safety.

What will TypeScript do if the overriding method returns a type incompatible with the parent method?

A Run the code without error

B Ignore the difference

C Automatically convert the type

D Show a type error

TypeScript enforces type compatibility and will show an error if return types don't match.

Which keyword is used to define a method in a TypeScript class that can be overridden?

A function

B override

C No special keyword needed

D method

No special keyword is needed to override a method; just define a method with the same name in the subclass.

If a subclass method has the same name but different parameter types than the parent, what happens?

A TypeScript error due to incompatible types

B Method is overridden successfully

C Parent method is deleted

D Code runs but with warnings

TypeScript requires compatible parameter types; otherwise, it shows an error.

What is the main benefit of method overriding with types in TypeScript?

A Ensures safe and predictable method behavior

B Allows any method signature changes

C Removes the need for inheritance

D Automatically documents code

Type checking during overriding ensures methods behave safely and predictably.

Explain method overriding in TypeScript and how type compatibility affects it.

Think about how a child class changes a parent's method but must keep the same 'shape' of inputs and outputs.

Describe what happens if an overriding method in TypeScript has a different return type than the parent method.

Focus on the importance of matching return types for safe code.

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