Why inheritance needs types in Typescript - Visual Breakdown

Concept Flow - Why inheritance needs types

Define Base Class

↓

Define Derived Class

↓

Create Derived Instance

↓

Access Base and Derived Members

↓

Type Checks Ensure Correct Usage

↓

Compile-Time Errors if Misused

↓

Safe and Predictable Inheritance

Inheritance uses types to ensure that derived classes correctly extend base classes, enabling safe access to properties and methods with compile-time checks.

Execution Sample

Typescript

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

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

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

Defines a base class Animal and a derived class Dog; creates a Dog instance and calls its bark method.

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with property name	Animal has property name:string	Animal class ready
2	Define class Dog extends Animal with method bark	Dog inherits name, adds bark()	Dog class ready
3	Create Dog instance with name 'Buddy'	dog.name = 'Buddy'	dog object created
4	Call dog.bark()	Returns 'Buddy barks!'	Output: Buddy barks!
5	Try to assign number to dog.name	TypeScript error	Compile-time error: Type 'number' not assignable to type 'string'

💡 Execution stops after successful bark output; type errors prevent unsafe assignments.

Variable Tracker

Variable	Start	After Step 3	Final
dog.name	undefined	'Buddy'	'Buddy'
dog.bark()	undefined	function	function

Key Moments - 2 Insights

Why does TypeScript give an error if I assign a number to dog.name?

Because dog.name is typed as string in the base class Animal, TypeScript enforces this type to keep inheritance safe, as shown in execution_table step 5.

How does inheritance let Dog use the name property?

Dog inherits the name property from Animal, so dog.name is valid and holds the string 'Buddy' as seen in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the output when dog.bark() is called at step 4?

A "Buddy barks!"

B "dog barks!"

C undefined

D Compile-time error

💡 Hint

Check the 'Result' column in execution_table row 4 for the bark() output.

At which step does TypeScript prevent an unsafe assignment to dog.name?

A Step 3

B Step 5

C Step 4

D No error occurs

💡 Hint

Look at execution_table step 5 where a compile-time error is shown.

If Dog did not extend Animal, what would happen when accessing dog.name?

A dog.name would be 'Buddy' anyway

B dog.bark() would fail but dog.name works

C dog.name would be undefined or error

D No effect on dog.name

💡 Hint

Inheritance provides dog.name property; without it, dog.name is not defined.

Concept Snapshot

Inheritance in TypeScript:
- Use 'class Derived extends Base' syntax
- Derived class inherits properties and methods
- Types ensure derived class matches base structure
- Type checks catch errors at compile time
- Enables safe, predictable code reuse

Full Transcript

This example shows why inheritance needs types in TypeScript. We define a base class Animal with a string property name. Then we create a derived class Dog that extends Animal and adds a bark method. When we create a Dog instance named 'Buddy', we can call bark() which uses the inherited name property. TypeScript enforces that name must be a string, so assigning a number causes a compile-time error. This type checking ensures inheritance is safe and predictable, preventing bugs by catching mistakes early. The execution table traces each step from class definition to method call and type error. The variable tracker shows how dog.name is set and used. Key moments clarify why type errors happen and how inheritance shares properties. The quiz tests understanding of output, error steps, and inheritance effects. This visual trace helps beginners see how types protect inheritance in real code.

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