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.

Practice

1. Why do we need types when using inheritance in TypeScript?

easy

A. To ensure the child class follows the structure of the parent class

B. To make the code run faster

C. To allow multiple inheritance

D. To avoid writing constructors

Solution

1. Step 1: Understand inheritance purpose

   Inheritance allows a child class to reuse code from a parent class.

2. Step 2: Role of types in inheritance

   Types ensure the child class matches the parent's structure, preventing mistakes.

3. Final Answer:

   To ensure the child class follows the structure of the parent class -> Option A

4. Quick Check:

   Types keep inheritance safe = A [OK]

Hint: Types keep child classes consistent with parents [OK]

Common Mistakes:

• Thinking types speed up code execution
• Confusing inheritance with multiple inheritance
• Believing constructors are avoided by types

2. Which of the following is the correct way to declare a class Dog that inherits from class Animal in TypeScript?

easy

A. class Dog Animal {}

B. class Dog inherits Animal {}

C. class Dog : Animal {}

D. class Dog extends Animal {}

Solution

1. Step 1: Recall TypeScript inheritance syntax

   TypeScript uses the keyword extends to inherit from a class.

2. Step 2: Check each option

   Only class Dog extends Animal {} uses extends correctly; others use invalid syntax.

3. Final Answer:

   class Dog extends Animal {} -> Option D

4. Quick Check:

   Inheritance uses 'extends' keyword = A [OK]

Hint: Remember: 'extends' keyword for class inheritance [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Using ':' like other languages (e.g., C#)
• Omitting 'extends' keyword

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

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

const dog = new Dog('Buddy');
console.log(dog.speak());

medium

A. Buddy makes a sound.

B. Buddy barks.

C. Error: speak method missing

D. undefined barks.

Solution

1. Step 1: Understand class inheritance and method overriding

   Dog inherits from Animal and overrides the speak() method.

2. Step 2: Check the output of dog.speak()

   dog.speak() calls Dog's speak(), returning 'Buddy barks.'

3. Final Answer:

   Buddy barks. -> Option B

4. Quick Check:

   Overridden method runs = D [OK]

Hint: Overridden methods in child class run, not parent's [OK]

Common Mistakes:

• Expecting parent method output
• Thinking speak method is missing
• Assuming name is undefined

4. Identify the error in this TypeScript code:

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

class Dog extends Animal {
  constructor() {
    super();
  }
}

medium

A. Missing argument in super() call

B. Dog class cannot have a constructor

C. name property should be private

D. super() should be called after this.name assignment

Solution

1. Step 1: Check Animal constructor parameters

   Animal's constructor requires a string argument name.

2. Step 2: Check Dog constructor call to super()

   Dog calls super() without arguments, causing an error.

3. Final Answer:

   Missing argument in super() call -> Option A

4. Quick Check:

   super() needs required parameters = B [OK]

Hint: super() must get all required parent constructor args [OK]

Common Mistakes:

• Calling super() without arguments when parent needs them
• Thinking child class can't have constructor
• Confusing property access modifiers

5. You want to create a class Rectangle that inherits from Shape. The Shape class requires a color string property. How should you define the Rectangle constructor to properly use inheritance and types in TypeScript?

hard

A. constructor(color: string) { this.color = color; }

B. constructor(width: number, height: number) { this.width = width; this.height = height; }

C. constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; }

D. constructor() { super(); this.width = 0; this.height = 0; }

Solution

1. Step 1: Understand parent constructor requirements

   Shape requires a color string in its constructor.

2. Step 2: Define Rectangle constructor with all needed parameters

   Rectangle must accept color and pass it to super(color), plus its own properties.

3. Step 3: Check options for correct super call and property assignments

   Only constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; } correctly calls super(color) and assigns width and height.

4. Final Answer:

   constructor(color: string, width: number, height: number) { super(color); this.width = width; this.height = height; } -> Option C

5. Quick Check:

   Pass parent args via super() = C [OK]

Hint: Pass all parent constructor args to super() in child constructor [OK]

Common Mistakes:

• Omitting super() call or its arguments
• Assigning parent properties directly without super()
• Missing child class properties in constructor