Classes in TypeScript: With Challenges
Tags: typescript, javascript, tutorial, beginners
Published: 2023-06-10 15:56:57

## 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:

```typescript
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:

```typescript
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.

```typescript
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.

```typescript
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:

```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.

```typescript
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.

```typescript
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

```typescript
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

```typescript
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

```typescript
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

```typescript
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](https://prodigious-innovator-1238.ck.page/25e4b3fdce)**