Skip to content
Related Articles

Related Articles

What is interfaces and explain it in reference of Typescript ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 04 Mar, 2022

TypeScript is an open-source programming language. It is a superset of JavaScript language. Type-Script is designed for the development of large applications. It is developed and maintained by Microsoft. TypeScript follows JavaScript syntactically but adds more features to it. It is a superset of JavaScript.

Interface: In general Interface is the structure or skeleton for object. Interface is programming syntax which enforce the syntax on the class. It is the definition of the object with only types of data it must have. Interface is the type for the object.

Interface in typescript is types for the object. In Type-Script interface is defined with the help of the interface keyword. JavaScript uses an interface for type checking. The interface is also known as structural subtyping.

Syntax:

interface InterfaceName{
    PropertyName: Type;
    methodName() => Type;
} 

Example:

Javascript




// Interface for Array
interface ForList {
    [index:number]: string
}
let newArray: ForList = ["Interface", "for", "Array"];
console.log(newArray);


Output:

[ 'Interface', 'for', 'Array' ]

In the above interface Geek, we have two property score and articles, which mean when we use the interface to create the object it must contain these two properties. There are many properties of Interface provided in the Typescript. Let’s see some of the properties of interfaces.

Extending property: Typescript interface provides extending property of interface which enable to re-writing new property existing Interface.&

interface For_Array {
    var1:  string;
}
interface For_List extends For_Array {
    var2: string;
}

Here for list interface contain var2 property and extend the var1 property of For_Array property.

Read only properties: This is security property of interface which makes interface non-changeable. We can make any property read-only with readonly before property.

interface For_class{
    readonly name: string;
    id: number;                          
}

Here since we mark readonly to name so after assigning the value to name we can’t change the value of it.

Optional properties: This property makes the interface more useful as what if we are not clear that we should add a property in the structure of any object. In that case, we can make that property optional so it is not just in structure. We can make optional with the ? symbol.

interface For_function {
    (key: string, value ?: string) : void ;
}

Here value property is optional so, when we create the function with this interface it may or may not contain the value parameter.

Example: Interface is generally types for large data-type and for function. Let see the interface for different types in the below code.

Javascript




// Interface for Function
interface ForFunc {
    (key:string,value?:string):void;
}
 
function Pri(key:string):void{
    console.log(key+" for "+value)
}
let newFunc: ForFunc = Pri;
newFunc("Interface","Function")
 
// Interface for Class
// Interface for Class
interface ForClass {
    readonly var1:string;              
}
interface ForList extends ForClass{
    var2:string;
    var3:string;
}
let newclass: ForList = {
    var1: "Interface",
    var2: "for",
    var3: "Array"
};
 
console.log(newclass);


To compile typescript code we can run the following command on the command line.

tsc Interface_Example.ts

This command will generate a JavaScript file with name Interface_Example.js

Run the JavaScript file using the following command on the command line.

node Interface_Example.js

Output:

Interface for Function
{ var1: 'Interface', var2: 'for', var3: 'Array' }

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!