TypeScript Interfaces

TypeScript Interfaces

In TypeScript, Interface is a deal that the objects of the type should contain properties and functions declared in the interface. Thus an Interface contains only the declarations of variables(properties) and methods(behaviors). And the objects declared as specific Interface type should define values for variables and implement methods declared in the interface.

Interface is an object oriented concept which helps objects of an Interface type contains same properties and methods. The actual implementation may change from object to object.

How Interface differ from Inheritance ?

Following are the main differences between interface and inheritance :

Interface	Inheritance
In an interface, variables and methods are only declared.	A super class declares and defines variables and methods.
Objects of an interface type cannot declare any new methods or variables.	A sub class that inherits a super class, can declare and define its own variables and methods.
Interface enforces the variables and methods that has to be present in an object.	A sub class extends the capability of a super class to suit the custom needs.

Syntax

Following is the syntax to declare and define an interface :

interface interface_name {
     // variables' declaration
     // methods' declaration
 }

• interface is the keyword to declare a TypeScript Interface.
• interface_name is name of the interface that is used to reference the interface through the program.
• interface body contains variables’ and methods’ declarations.

Example

Following is a simple Interface called Student, which has two variables declared: name and rollNumber, and one method : displayInformation().

example.ts

interface Student{
    // variables
    name:string
    rollnumber:number

    // functions
    displayInformation: () => void
}

var student1: Student = {
    name:"Rohit",
    rollnumber:2, 
    displayInformation: ():void => {
        console.log("\n---- Student Information ----")
        console.log("Name is : " + student1.name)
        console.log("Roll Number is : " + student1.rollnumber)
    }
}

console.log(student1.name)
console.log(student1.rollnumber)
student1.displayInformation()

Output

Rohit
2

---- Student Information ----
Name is : Rohit
Roll Number is : 2

JavaScript file when the above .ts while is compiled using tsc :

example.js

var student1 = {
    name: "Rohit",
    rollnumber: 2,
    displayInformation: function () {
        console.log("\n---- Student Information ----");
        console.log("Name is : " + student1.name);
        console.log("Roll Number is : " + student1.rollnumber);
    }
};
console.log(student1.name);
console.log(student1.rollnumber);
student1.displayInformation();

This example only demonstrates how to declare an interface and how objects of the interface type are created.

One may appreciate interface concept when the architect or developer does not know the implementation, but definitely knows about the parameters and the methods that has to be there. For example, consider Car as an interface that has properties: number of wheels, side mirrors, and method : breaking(), acceleration(), turn(), etc. A car company can create a car with its own interests, but any car that is created (car object of type Car interface), should implement methods and define variables that are present in the interface.

Conclusion

In this TypeScript Tutorial, we have learnt how to create an interface and how objects of an interface type are created that implement the interface with examples.