An introduction to classes in TypeScript

·

3 min read

Classes

As we all know classes are blueprints of some real world entity with some values and some methods to represent that entity. It promotes code re-usability and occupies not memory until we create an instance of a class.

I am assuming you know how we declare classes in JavaScript because in this blog we will go through how we are using classes in TypeScript

Using inheritance in TypeScript

This is how we declare a class in TS


class Vehicle{

    drive():void{
        console.log('Vroom')
    }

}

Now like JS we will be using the 'extends' keyword to inherit this Vehicle class


class Car extends Vehicle{
    drive():void{
        console.log('Honk')
    }
}

Accessing the methods remains in the same manner like JS. We create an instance of a class, we apply the method we want to use


const vehicle = new Vehicle();
vehicle.drive(); // Vroom

cont tata = new Car();
tata.drive(); // Honk

Private Methods

Till now we have made our methods public. If we want to shield our methods from outside access we will use the keyword 'private' in front of our method. Now our private method can only be called from within the class. This is how we will do it in the existing example

class Car extends Vehicle{
    public drive() : void {
        this.horn();
    }

    private horn() :void {
        console.log('Horn method called');
    }

}

The reason we make methods private so we restrict the use of certain methods from access of other developers from altering our implementations

Fields in Classes

We can declare parameters in our classes but before than we need to remind ourselves what access modifiers are

  1. public - allows access from outside the class and from the child class

  2. private - restricts access from outside the class and from child classes. Allows access from within the class

  3. protected - restricts the access from outside the class and allows access by the child classes

  4. static - allows accessed directly from anywhere without the need to create an instance of the class

Here is a sample code written in TS to understand private, static, protected and public


class Vehicle{

    color : string = 'default_color' ;
    constructor(color : string){
        this.color = color;
    }

    public drive() : void {
        console.log('Vroom');
    }

    protected honk() : void {
        console.log('Honk method called');
    }

    static fire(i : any) : any{
        return 'fire method is returning' + i;
    }

    private test() : void {
        console.log('test called');
    }    

}

You will see we have declared the color argument as well. The 'colour : string' initialised in the constructor and while creating instance we will provide this colour.

While color : string = 'default_color' ; is initialised by us.

Let's see how we will access these methods


const vehicle = new Vehicle('orange);

vehicle.drive(); // Vroom
vehicle.test(); // Will show error

X Vehicle.fire('random number'); // fire method is returning 
random number

On line X see how we are directly using 'Vehicle.fire()' , we don't to create an instance of the Vehicle class to access fire method. If we try to directly access other method like this, it will throw an error.

Fields with inheritance

So consider we declared a parameter in the parent class but we are creating an instance of child class.

To invoke the parameters of parent class we will use the 'super()' keyword. To assign a variable we will pass the variable to the super();

This is how we will do it

class Vehicle{
    color : string;
    constructor(color : string){
        this.color = color;
    }
}

class Car extends Vehicle{

    constructor(){
        super("default_color_red");
    }

}

See how we will use the both classes now

const vehicle = new Vehicle('orange');
const tata = new Car();

console.log(vehicle.color)// orange
console.log(tata.color)// default_color_red

Classes allows us to create functionality as per the requirements.

In next blog we will see how we can create a custom csv file reader.