Super keyword behavior in Typescript - Mini Project: Build & Apply

Super keyword behavior

📖 Scenario: Imagine you are creating a simple system to manage vehicles. You want to reuse some code from a basic vehicle class in a more specific car class. This helps avoid repeating code and keeps things organized.

🎯 Goal: You will build two classes: Vehicle and Car. The Car class will use the super keyword to call the constructor and methods of the Vehicle class. This shows how super helps reuse and extend code.

📋 What You'll Learn

Create a class called Vehicle with a constructor that takes a make string and a method describe() that returns a description string.

Create a class called Car that extends Vehicle and has an additional property model.

Use super in the Car constructor to call the Vehicle constructor.

Override the describe() method in Car and use super.describe() inside it.

Create an instance of Car and print the result of its describe() method.

💡 Why This Matters

🌍 Real World

Using <code>super</code> is common when building software with related objects, like vehicles, employees, or products, to avoid repeating code.

💼 Career

Understanding <code>super</code> and class inheritance is essential for many programming jobs, especially in frontend and backend development using TypeScript or JavaScript.

1

Create the Vehicle class

Create a class called Vehicle with a constructor that takes a make string and stores it in a public property called make. Add a method called describe() that returns the string `This vehicle is a ${this.make}`.

Typescript

# Your code here

Need a hint?

Remember to use this.make = make inside the constructor to save the value.

2

Create the Car class with super constructor call

Create a class called Car that extends Vehicle. Add a constructor that takes make and model strings. Use super(make) to call the Vehicle constructor. Store model in a public property called model.

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

# Your code here

Need a hint?

Use super(make) inside the Car constructor to call the parent constructor.

3

Override describe() method in Car using super

In the Car class, override the describe() method. Inside it, call super.describe() and add the model information to return a string like `This vehicle is a ${this.make} and the model is ${this.model}`.

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

class Car extends Vehicle {
    public model: string;
    constructor(make: string, model: string) {
        super(make);
        this.model = model;
    }
    
    # Your code here
}

Need a hint?

Use super.describe() inside the new describe() method to reuse the parent class message.

4

Create Car instance and print description

Create a variable called myCar and assign it a new Car object with make as 'Toyota' and model as 'Corolla'. Then print the result of myCar.describe().

Typescript

class Vehicle {
    public make: string;
    constructor(make: string) {
        this.make = make;
    }
    describe(): string {
        return `This vehicle is a ${this.make}`;
    }
}

class Car extends Vehicle {
    public model: string;
    constructor(make: string, model: string) {
        super(make);
        this.model = model;
    }
    describe(): string {
        return `${super.describe()} and the model is ${this.model}`;
    }
}

# Your code here

Need a hint?

Use console.log(myCar.describe()) to print the description.