What is Class and How to use Class in TypeScript?

In the last tutorial we learn about what is interface and how we can use Interface in typescript to define a shape of a particular object.

So in this tutorial we are going to look at the classes, basically what is classes in typescript and how we can defined them. I am going to give you details along with very simple easy to understand example of using class in typescript.

What is a TypeScript Class?

A Class is a groups of variables (properties) and functions (methods) that are highly related.

So basically we define a class to handle a particular related task, so all of the related operations of that particular task are going to combine within a group and that group is called a Class.

How to define class in TypeScript?

Syntax of Class in TypeScript:

class AClass {
  // this are the properties
  a: number;
  b: number;

  //this is constructor of the class
  constructor() {}

  // This is function without parameter
  test() {}

  // this is function with parameters
  addition(x: number, y: number) {}
}

You can see in the above syntax we have used class keyword to define class called Calculator and look we have first later capitalised as see in the last tutorial about Interface in Typescript so same rule apply here for class name as well.

Here is the details on structure of TypeScript Class:

• Properties − A field is any variable declared in a class. Fields basically represent data pertaining to objects
• Constructor − Responsible for allocating memory for the objects of the class.
• Functions / Methods − Functions are basically an actions that object can take. functions also called methods.

Example of Using Class in TypeScript:

Let’ see how to use a class for with real time example, in simple words I am going to guide you on how to use class and benefits of using class.

So as you know in Interfaces we see that how we can define an interface, but there is problem with that example. Please refer interface tutorial if you have not read it before because I am going to take reference here.

So here is the example from interface tutorial:

interface Calculate {
  x: number;
  y: number;
}

let addition = (calculate: Calculate) => {
  console.log(calculate.x + calculate.y);
};

addition({ x: 1, y: 2 });

So the problem is let’s say you want to write complete program of calculator and in this case we have just implemented single method of a calculator, but to build a complete calculator we are going to need multiple methods for multiple operations.

Eventually those methods are all related to the same objective, so in object oriented language we always group related things in to one group and we call it class.

Okay now let’s see how we can define all of the method under the same class:

// Basic example of Calculator class 
class Calculator {
  // example of add method
  add(x: number, y: number) {
    // ...
  }

  // example of multiply method
  multiply(x: number, y: number) {
    // ...
  }

  // example of multiply method
  substract(x: number, y: number) {
    //..
  }

  // example of multiply method
  divide(x: number, y: number) {
    //..
  }
}

Now you can see in the above example we have restructured our calculator program and grouped everything related to the class.

So here is the lesson to learn, alway use classes combine related to task this will make your code more readable.

Conclusion:

So from this tutorial you have learned that what is a class and how to define class in typescript and more specifically you have get details on why you should always use classes instead of defining global functions into your typescript.

I hope this tutorial was helpful if you are still not clear in mind about using it into the application don’t get confuse in upcoming tutorials you have perfect idea and understanding on using even I promise you will learn typescript completely just follow me 🙂

What’s Next?

I would recommend you to learn next about creating objects of a typescript class and you can get everything you needs know here – What is object and How to Declare object of a class in TypeScript?