Classes in TypeScript

Introduction

TypeScript, being a superset of JavaScript, brings additional features to the language that make it more robust and easier to maintain. One such feature is the support for object-oriented programming (OOP) through classes. In this tutorial, we will explore how to define and use classes in TypeScript, including constructors, methods, and properties.

Concept

In TypeScript, a class is a blueprint for creating objects. It encapsulates data for the object and methods to manipulate that data. Classes in TypeScript are similar to those in other object-oriented languages like Java or C#. They provide a way to organize your code into logical groups of variables and functions.

Key Components of a Class

1. Class Declaration: Defines a new class using the class keyword.
2. Constructor: A special method for initializing objects.
3. Properties: Variables that hold data related to the object.
4. Methods: Functions that define behaviors of the object.

Examples

Let's start by looking at some practical examples to understand how classes work in TypeScript.

Basic Class Example

Here is a simple example of a class that represents a Car.

1class Car {
2// Properties
3make: string;
4model: string;
5year: number;
6 
7// Constructor
8constructor(make: string, model: string, year: number) {
9  this.make = make;
10  this.model = model;
11  this.year = year;
12}
13 
14// Method
15displayInfo(): void {
16  console.log(`Car: ${this.make} ${this.model}, Year: ${this.year}`);
17}
18}
19 
20// Creating an instance of the Car class
21const myCar = new Car('Toyota', 'Corolla', 2021);
22myCar.displayInfo();

$ ts-node car.ts

Car: Toyota Corolla, Year: 2021

In this example:

• We define a Car class with properties make, model, and year.
• The constructor initializes these properties.
• The displayInfo method logs the car's information to the console.

Inheritance

TypeScript supports inheritance, allowing you to create a new class based on an existing one. This is useful for reusing code and creating more specialized classes.

1class ElectricCar extends Car {
2batteryCapacity: number;
3 
4constructor(make: string, model: string, year: number, batteryCapacity: number) {
5  super(make, model, year);
6  this.batteryCapacity = batteryCapacity;
7}
8 
9displayBatteryInfo(): void {
10  console.log(`Battery Capacity: ${this.batteryCapacity} kWh`);
11}
12}
13 
14const myElectricCar = new ElectricCar('Tesla', 'Model S', 2022, 100);
15myElectricCar.displayInfo();
16myElectricCar.displayBatteryInfo();

$ ts-node electric-car.ts

Car: Tesla Model S, Year: 2022
Battery Capacity: 100 kWh

In this example:

• We create an ElectricCar class that extends the Car class.
• The constructor calls super() to initialize the properties from the parent class (Car).
• We add a new property batteryCapacity and a method displayBatteryInfo.

What's Next?

In the next section, we will explore Access Modifiers in TypeScript. Access modifiers control the visibility of class members (properties and methods) and help in encapsulating data.

Stay tuned for more advanced topics in TypeScript!