Extending classes with types in Typescript - Mini Project: Build & Apply

Extending Classes with Types in TypeScript

📖 Scenario: You are building a simple system to manage vehicles. You want to create a base class for a vehicle and then extend it to create a specific type of vehicle, like a car, with extra properties.

🎯 Goal: Learn how to create a base class with types and extend it with a subclass that adds more typed properties.

📋 What You'll Learn

Create a base class called Vehicle with typed properties

Create a subclass called Car that extends Vehicle

Add a new typed property to Car

Create an instance of Car and print its details

💡 Why This Matters

🌍 Real World

Extending classes with types is common when modeling real-world objects that share common features but also have unique details.

💼 Career

Understanding class inheritance and typing is essential for building scalable and maintainable applications in TypeScript, widely used in web development.

1

Create the base class Vehicle

Create a class called Vehicle with two typed properties: make of type string and year of type number. Add a constructor that sets these properties.

Typescript

// Create the Vehicle class with make and year properties
class Vehicle {
    // Your code here
}

Need a hint?

Use class Vehicle and define make and year as properties with types. Then add a constructor to set them.

2

Create the subclass Car extending Vehicle

Create a class called Car that extends Vehicle. Add a new typed property called doors of type number. Add a constructor that takes make, year, and doors and calls the base class constructor for make and year.

Typescript

class Vehicle {
    make: string;
    year: number;

    constructor(make: string, year: number) {
        this.make = make;
        this.year = year;
    }
}

// Create the Car class extending Vehicle
class Car extends Vehicle {
    // Your code here
}

Need a hint?

Use extends Vehicle to create the subclass. Use super(make, year) inside the constructor to call the base class constructor.

3

Create an instance of Car

Create a variable called myCar and assign it a new Car object with make as "Toyota", year as 2020, and doors as 4.

Typescript

class Vehicle {
    make: string;
    year: number;

    constructor(make: string, year: number) {
        this.make = make;
        this.year = year;
    }
}

class Car extends Vehicle {
    doors: number;

    constructor(make: string, year: number, doors: number) {
        super(make, year);
        this.doors = doors;
    }
}

// Create an instance of Car called myCar
// Your code here

Need a hint?

Use new Car("Toyota", 2020, 4) to create the instance and assign it to myCar.

4

Print the details of myCar

Write a console.log statement to print the string: "Make: Toyota, Year: 2020, Doors: 4" using the properties of myCar.

Typescript

class Vehicle {
    make: string;
    year: number;

    constructor(make: string, year: number) {
        this.make = make;
        this.year = year;
    }
}

class Car extends Vehicle {
    doors: number;

    constructor(make: string, year: number, doors: number) {
        super(make, year);
        this.doors = doors;
    }
}

const myCar = new Car("Toyota", 2020, 4);

// Print the details of myCar
// Your code here

Need a hint?

Use a template string with console.log to print the properties of myCar.