Classes in TypeScript: With Challenges

Unleashing the Power of Classes in TypeScript

Classes are the superheroes of object-oriented programming, bringing structure, organization, and reusability to our code. In this blog post, we'll embark on a thrilling adventure into the realm of classes in TypeScript. Get ready to wield the power of encapsulation, inheritance, and polymorphism as we dive deep into the world of TypeScript classes!

Class Basics

In TypeScript, classes provide a blueprint for creating objects with shared properties and behavior. Let's start with the basics of class syntax:

class Animal {
  // Properties
  name: string;
  age: number;

  // Constructor
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // Methods
  sayHello() {
    console.log(`Hello, I'm ${this.name}!`);
  }
}

In this example, we define a class called Animal with two properties: name and age. The constructor is a special method that initializes the class properties when an object is created. We also have a sayHello method that logs a greeting message.

To create an instance of the Animal class, we use the new keyword:

const dog = new Animal('Buddy', 3);
dog.sayHello(); // Output: Hello, I'm Buddy!

Challenges

Challenge 1: Create a Person Class

Create a class called Person with the following properties: name (string), age (number), and email (string). Implement a method called introduce that logs a message introducing the person with their name and age.

class Person {
  // Properties
  name: string;
  age: number;
  email: string;

  // Constructor
  constructor(name: string, age: number, email: string) {
    // Your code goes here
  }

  // Method
  introduce() {
    // Your code goes here
  }
}

Hint: Inside the constructor, assign the parameter values to the class properties using the this keyword.

Challenge 2: Create a Car Class

Create a class called Car with the following properties: make (string), model (string), and year (number). Implement a method called startEngine that logs a message indicating that the car's engine has started.

class Car {
  // Properties
  make: string;
  model: string;
  year: number;

  // Constructor
  constructor(make: string, model: string, year: number) {
    // Your code goes here
  }

  // Method
  startEngine() {
    // Your code goes here
  }
}

Hint: Inside the startEngine method, log a message using the console.log function.

Inheritance: Supercharge Your Classes

One of the superpowers of classes is the ability to inherit properties and methods from a parent class. This allows us to create specialized classes while reusing common functionality. Let's explore inheritance in TypeScript:

class Vehicle {
  // Properties
  make: string;
  model: string;

  // Constructor
  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }

  // Method
  startEngine() {
    console.log('Engine started!');
  }
}

class Car extends Vehicle {
  // Additional properties and methods
  // ...
}

In this example, the Car class extends the Vehicle class using the extends keyword. This means the Car class inherits the make and model properties, as well as the startEngine method. You can then add additional properties and methods specific to cars.

Challenges (Continued)

Challenge 3: Create a Student Class

Create a class called Student that extends the Person class from Challenge 1. Add a new property called grade (string) to the Student class. Override the introduce method to include the student's name, age, and grade.

class Student extends Person {
  // Additional property
  grade: string;

  // Constructor
  constructor(name: string, age: number, email: string, grade: string) {
    // Your code goes here
  }

  // Method override
  introduce() {
    // Your code goes here
  }
}

Hint: Inside the introduce method of the Student class, call the introduce method of the Person class using the super keyword.

Challenge 4: Create a SportsCar Class

Create a class called SportsCar that extends the Car class from Challenge 2. Add a new method called accelerate that logs a message indicating that the sports car is accelerating.

class SportsCar extends Car {
  // Additional methods
  // ...
}

Hint: Inside the accelerate method, log a message using the console.log function.

Challenge Answers

Challenge 1: Create a Person Class

class Person {
  // Properties
  name: string;
  age: number;
  email: string;

  // Constructor
  constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }

  // Method
  introduce() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

Challenge 2: Create a Car Class

class Car {
  // Properties
  make: string;
  model: string;
  year: number;

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

  // Method
  startEngine() {
    console.log('Engine started!');
  }
}

Challenge 3: Create a Student Class

class Student extends Person {
  // Additional property
  grade: string;

  // Constructor
  constructor(name: string, age: number, email: string, grade: string) {
    super(name, age, email);
    this.grade = grade;
  }

  // Method override
  introduce() {
    super.introduce();
    console.log(`I'm in grade ${this.grade}.`);
  }
}

Challenge 4: Create a SportsCar Class

class SportsCar extends Car {
  // Method
  accelerate() {
    console.log('Vroom! The sports car is accelerating!');
  }
}

Congratulations on completing the challenges! Classes are powerful tools for creating reusable and organized code structures. With inheritance, you can build specialized classes on top of existing ones, unlocking endless possibilities for code design. Keep exploring the fascinating world of TypeScript classes and continue to level up your programming skills! 🚀

Subscribe to my newsletter where you will get tips, tricks and challenges to keep your skills sharp. Subscribe to newsletter