How to use interface with class in TypeScript?

In TypeScript, classes are the template that defines the variables and methods. We can use class templates to create objects, which means the class is the reusable component in object-oriented programming, and we can reuse it by creating its object.

We can use the ‘interface’ keyword to define the interfaces in TypeScript. The interface contains the class structure. The interface is similar to abstract classes we define in other programming languages, such as Java and C++. It contains only the declaration of variables with their type and method with its return type and parameter types. Classes define the interface's methods and initialize the values of the variables declared in the interface.

Implementing Interface With Classes in TypeScript

In this section, we will learn to create and implement the interface with the classes. We can use the implements keyword to implement any interface with classes.

Syntax

In the syntax below, we have created the interface and class. Also, we have shown syntax to implement the interface to the class.

interface Wall {
   // variable and method declaration
   color: string;
   get_size: () => number;
}

class WallDetails implements Wall {
   // defining the variables and methods
   color = "#434322";
   get_size() {
      return 20;
   }
}

Steps

• Step 1 − First, create the Wall interface, which contains the wall_id and color variable declaration.

• Step 2 − Declare the get_size() method, which takes the wall_id as a parameter and returns the number.

• Step 3 − Declare the get_wall_message() method doesn’t take a single parameter but returns the string.

• Step 4 − Define the class named walllDetails and use the implements keyword to implement the Wall interface to the wallDetails class. In the wallDetails class, initialize the wall_id and color variables using the constructor.

• Step 5 − Next, define the get_size() method, which returns the size of the wall according to the wall_id values it gets as a parameter. Also, implement the get_wall_size() method, which always returns the same string message.

Example 1

The below example demonstrates the creation of the wall interface and its implementation to the wallDetails class.

Furthermore, we have created the wall1 object of the wallDetails class, which have wall_id 1. Users can observe the output when we invoke the get_size() and get_wall_message() methods by taking the wall1 object as a reference.

// defining the wall interface
interface Wall {
   // variable and method declaration
   wall_id: number;
   get_size: (wall_id: number) => number;
   get_wall_message: () => string;
}

class WallDetails implements Wall {
   // defining the variables and methods
   wall_id: number;
   // constructor to initialize the variables
   constructor(wall_id: number) {
      this.wall_id = wall_id;
   }
  
   get_size(wall_id: number): number {
      if (wall_id < 10) {
         return 10;
      } else if (wall_id > 10 && wall_id < 50) {
         return 50;
      }
      return 100;
   }

   get_wall_message(): string {
      return "Don't draw pictures on the wall!";
   }
}

let wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());

On compiling, it will generate the following JavaScript code −

var WallDetails = /** @class */ (function () {
   // constructor to initialize the variables
   function WallDetails(wall_id) {
      this.wall_id = wall_id;
   }
   WallDetails.prototype.get_size = function (wall_id) {
      if (wall_id < 10) {
         return 10;
      }
      else if (wall_id > 10 && wall_id < 50) {
         return 50;
      }
      return 100;
   };
   WallDetails.prototype.get_wall_message = function () {
      return "Don't draw pictures on the wall!";
   };
   return WallDetails;
}());
var wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());

Output

The above code will produce the following output −

The size of the wall1 is 10
The message of the wall1 is Don't draw pictures on the wall!

Example 2

In the example below, we have defined the card interface, which contains the card_size, gradient, and card_phone_No properties. The gradient property is optional so that we can create the card-type object without a gradient. The card_phone_No is a read-only property, which means we can’t modify the property.

We created the card_obj1 of type card, which contains all 3 properties and its value. Also, we created the card_ob2 of type card, which doesn’t contain the gradient property, and still, it compiles successfully as the gradient is optional

// Creating the card interface containing the card_size, gradient, and card_phone_No properties
interface card {
   card_size: number;
   gradient?: string;
   readonly card_phone_No: number;
}

// defining the card_obj1 with all 3 properties
let card_obj1: card = {
   card_size: 20,
   gradient: "black-white",
   card_phone_No: 92323232332,
};

//  defining the card_obj2 object without gradient property as it is an optional
let card_obj2: card = {
   card_size: 10,
   card_phone_No: 446189746464,
};

// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.

console.log(
"Printing the card_obj2 details
" +
   "Card size: " + card_obj2.card_size +
   "Phone No : " + card_obj2.card_phone_No +
   "
gradient: " +card_obj2.gradient
);

In the output, we can see that value of the gradient property for the card_ob2 is undefined.

On compiling, it will generate the following JavaScript code −

// defining the card_obj1 with all 3 properties
var card_obj1 = {
   card_size: 20,
   gradient: "black-white",
   card_phone_No: 92323232332
};

//  defining the card_obj2 object without gradient property as it is an optional
var card_obj2 = {
   card_size: 10,
   card_phone_No: 446189746464
};

// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.
console.log("Printing the card_obj2 details" +
   "
Card size: " + card_obj2.card_size + 
   "
Phone No : " + card_obj2.card_phone_No + 
   "gradient: " + card_obj2.gradient);

Output

The above code will produce the following output −

Printing the card_obj2 details
Card size: 10
Phone No : 446189746464
gradient: undefined

Example 3

In the example below, we have defined the interface func_type, which contains the structure of a single function. After that, we defined the func1() variable, which takes the string as the first parameter and the boolean value as a second parameter and prints the parameter values.

After that, we created the func_variable of type function_type and assigned func1 as its value. After that, we called the func1() function using the func_variable.

// defining the interface as a function type
interface function_type {
   // function takes two parameters; string and boolean and returns void
   (param1: string, param2: boolean): void;
}

// func1 prints the parameter values
function func1(param1: string, param2: boolean): void {
   console.log("The value of param1 is " + param1);
   console.log("The value of the param2 is " + param2);
}

// func_variable is of type function_type interface and assigned the func1 function
let func_variable: function_type = func1;

// we can call func1() via func_variable
func_variable("TutorialsPoint", true);

On compiling, it will generate the following JavaScript code −

// func1 prints the parameter values
function func1(param1, param2) {
   console.log("The value of param1 is " + param1);
   console.log("The value of the param2 is " + param2);
}

// func_variable is of type function_type interface and assigned the func1 function
var func_variable = func1;

// we can call func1() via func_variable
func_variable("TutorialsPoint", true);

Output

The above code will produce the following output −

The value of param1 is TutorialsPoint
The value of the param2 is true

In this tutorial, we learned how to use an interface with class in TypeScript.