Why inheritance needs types in Typescript - See It in Action

Why inheritance needs types

📖 Scenario: Imagine you are building a simple system to manage different types of vehicles. Each vehicle has some common features, but specific types like cars and trucks have their own special features.

🎯 Goal: You will create a base class for vehicles and two child classes for car and truck. You will use TypeScript types to make sure each class has the right properties and methods. This will show why types are important when using inheritance.

📋 What You'll Learn

Create a base class called Vehicle with a make and model property

Create a class called Car that inherits from Vehicle and adds a seats property

Create a class called Truck that inherits from Vehicle and adds a capacity property

Create a variable called myCar of type Car with specific values

Create a variable called myTruck of type Truck with specific values

Print the details of myCar and myTruck to show their types and properties

💡 Why This Matters

🌍 Real World

Inheritance with types is used in software to organize related objects like vehicles, employees, or products, making code easier to manage and understand.

💼 Career

Understanding inheritance and types is essential for writing clear, safe, and maintainable code in many programming jobs, especially when working with object-oriented languages like TypeScript.

1

Create the base class Vehicle

Create a class called Vehicle with a constructor that takes make (string) and model (string) and assigns them to public properties.

Typescript

# Your code here

Hint

Use class Vehicle and a constructor with public parameters to create properties easily.

2

Create Car and Truck classes inheriting Vehicle

Create a class called Car that extends Vehicle and adds a public seats (number) property. Also create a class called Truck that extends Vehicle and adds a public capacity (number) property. Use constructors to set all properties.

Typescript

class Vehicle {
    constructor(public make: string, public model: string) {}
}

# Your code here

Hint

Use extends Vehicle and call super(make, model) inside constructors.

3

Create instances of Car and Truck

Create a variable called myCar of type Car with make 'Toyota', model 'Corolla', and seats 5. Create a variable called myTruck of type Truck with make 'Ford', model 'F-150', and capacity 1000.

Typescript

class Vehicle {
    constructor(public make: string, public model: string) {}
}

class Car extends Vehicle {
    constructor(make: string, model: string, public seats: number) {
        super(make, model);
    }
}

class Truck extends Vehicle {
    constructor(make: string, model: string, public capacity: number) {
        super(make, model);
    }
}

# Your code here

Hint

Create variables with const and use new Car(...) and new Truck(...).

4

Print details of myCar and myTruck

Print the details of myCar and myTruck using console.log. Show the make, model, and seats for myCar, and make, model, and capacity for myTruck.

Typescript

class Vehicle {
    constructor(public make: string, public model: string) {}
}

class Car extends Vehicle {
    constructor(make: string, model: string, public seats: number) {
        super(make, model);
    }
}

class Truck extends Vehicle {
    constructor(make: string, model: string, public capacity: number) {
        super(make, model);
    }
}

const myCar: Car = new Car('Toyota', 'Corolla', 5);
const myTruck: Truck = new Truck('Ford', 'F-150', 1000);

# Your code here

Hint

Use console.log with template strings to show the properties.

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