Why inheritance needs types in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of method call with inheritance and types

What is the output of this TypeScript code that uses inheritance and typed methods?

Typescript

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

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

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

A "Woof!"

B TypeError at runtime

C undefined

D "Generic sound"

💡 Hint

Remember that the method called depends on the actual object type, not the variable type.

The variable pet is typed as Animal, but it holds an instance of Dog. When calling pet.speak(), the Dog version of speak runs, returning "Woof!".

🧠 Conceptual

intermediate

Why does TypeScript require types in inheritance?

Why does TypeScript require explicit types when using inheritance?

A To allow inheritance only between classes with the same name

B To make the code run faster in the browser

C To ensure methods and properties are correctly checked and prevent runtime errors

D To automatically convert all types to strings

💡 Hint

Think about how types help catch mistakes before running the code.

TypeScript uses types in inheritance to check that subclasses correctly implement or override properties and methods. This helps catch errors early and ensures safer code.

🔧 Debug

advanced

Identify the type error in this inheritance example

What type error does this TypeScript code produce?

Typescript

class Vehicle {
  speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
}

class Car extends Vehicle {
  speed: string;
  constructor(speed: string) {
    super(0);
    this.speed = speed;
  }
}

const myCar = new Car("fast");

A Missing return type on constructor

B No error, code compiles fine

C Cannot call super() without arguments

D Property 'speed' in 'Car' conflicts with inherited property of type 'number'

💡 Hint

Check the types of the 'speed' property in both classes.

The Car class declares speed as a string, but Vehicle declares it as a number. This type conflict causes a TypeScript error.

📝 Syntax

advanced

Which option correctly types a subclass constructor?

Which constructor syntax correctly types the subclass in TypeScript?

Typescript

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  employeeId: number;
  // constructor here
}

A

constructor(name: string) {
  super(name);
  this.employeeId = 0;
}

B

constructor(name: string, employeeId: number) {
  super(name);
  this.employeeId = employeeId;
}

C

constructor(name: string, employeeId: string) {
  super(name);
  this.employeeId = employeeId;
}

D

constructor(employeeId: number) {
  this.employeeId = employeeId;
  super('Unknown');
}

💡 Hint

Remember that super() must be called before using 'this' and types must match.

Option B correctly calls super(name) before assigning this.employeeId and uses the correct type number for employeeId.

Option B uses this before super(), which is invalid.

Option B assigns a string to employeeId which is declared as number.

Option B does not accept employeeId as a parameter.

🚀 Application

expert

Determine the number of properties in the final object

Given this TypeScript inheritance code, how many own properties does the instance 'obj' have?

Typescript

class Base {
  baseProp = 1;
}

class Derived extends Base {
  derivedProp = 2;
}

const obj = new Derived();

A 2

B 1

C 0

D 3

💡 Hint

Count the properties assigned directly on the instance, not inherited ones.

The instance obj has two own properties: baseProp and derivedProp. Both are assigned directly in the constructors (or property initializers), so obj owns both.