Make Mobile Apps with Ionic Framework 3 - Tutorial Part 8 Classes

Hey Steemians. In the last lecture we used an interface to defined sides of a rectangle object. But there is a problem with this implementation.

interface Sides {
    x: number,
    y: number
}

let areaOfRectangle = (sides: Sides) => {
    return sides.x * sides.y;
}

areaOfRectangle({
    x: 5,
    y: 8
})

In object oriented programming languages, we have the concept called cohesion. Whic basically means things that are related should be part of one unit. They should go together this is the cohesion.

Cohesion refers to what the class (or module) will do. Low cohesion would mean that the class does a great variety of actions and is not focused on what it should do. High cohesion would then mean that the class is focused on what it should be doing, i.e. only methods relating to the intention of the class.
Source

Now back to the interface example on the top we had declare an interface to defined sides of a rectangle object.

interface Sides {
    x: number,
    y: number
}

And below that we have the function.

let areaOfRectangle = (sides: Sides) => {
    return sides.x * sides.y;
}

This is where we have violated the cohesion principle. So the areaOfRectangle function haightly related to the structure of Sides. It should not be a seperate function. Now if we’re gonna create another function like:

let circOfRectangle = (sideA: Sides, sideB: Sides) => {
    return (sideA.x + sideB.y) * 2
}

Again we have violated the cohesion principle. We have two functions hanging in there seperate from the sides object. Since this concepts are highly related they should be part of one unit. In object oriented languages we call that unit “Class”. So class, groups properties and functions highly related.

In object-oriented programming , a class is a template definition of the methods and variables in a particular kind of object. Thus, an object is a specific instance of a class; it contains real values instead of variables.
Source

In our implementation unfortunately we can’t move these two functions named areaOfRectangle and circOfRectangle inside our interface. Because intefaces are purely for declarations. They can’t include an implementation. In other words we can’t have the algorithm for calculating the area or circumference of rectangle inside this interface.

But we can do instead is to add a function in interface. And returns void which means doesn’t return anything.

interface Sides {
    x: number,
    y: number,
    area: () => void
}

In interfaces we cant’ have implementation. We can only have signature of a function. So the interface that in above rotating Typescript compiler that are Sides object should have two properties, x and y and a function called area.

So what should be do now to apply the cohesion principle here? We need to use a class instead of an interface. So I’m gonna change type of interface to class. And rewrite the properties.

class Sides {
    x: number;
    y: number;
    
    area() {
        return x * y;
    }
}

So are Sides class has three members. The first two members are what we called fields that we use for storing data. And the third member is a function.

In object oriented programming terms, we called members like x and y, fields, and we called functions as methods.

Previous Chapter: Arrow Functions & Interfaces in TypeScript
Next Chapter: Constructors in TypeScript