Open In App

What are TypeScript Interfaces?

Improve
Improve
Like Article
Like
Save
Share
Report

Interfaces are a feature of TypeScript, an open-source programming language developed and maintained by Microsoft, designed for building large-scale applications. It extends JavaScript by adding features. In this article, we’ll explore what interfaces are, how they work, and their significance in TypeScript.

What Are Interfaces?

An interface in TypeScript defines the structure or skeleton of an object. It enforces a specific syntax on classes, specifying the types of data an object must have. Essentially, an interface acts as a contract that describes the shape of an object.

Syntax of an Interface:

An interface is defined using the interface keyword:

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

Example of TypeScript Interface:

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 example, the ForList interface ensures that any object created using it must have an index signature with string values.

Properties of Interfaces

1. Extending properties:

TypeScript allows interfaces to extend existing interfaces. This enables us to add new properties to an interface while reusing properties from another.

Example:

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.

2. Read only properties:

Marking a property as readonly ensures it cannot be modified after assignment.

Example:

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

3. Optional properties:

Making a property optional using the ? symbol allows flexibility in object structures.

Example:

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 of TypeScript Interface:

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' }

4. Function Interfaces:

Interfaces can describe function types.

Example of Function Interface:

Javascript




interface ForFunc {
    (key: string, value?: string): void;
}
 
function printInfo(key: string, value: string): void {
    console.log(`${key} for ${value}`);
}
 
const newFunc: ForFunc = printInfo;
newFunc("Interface", "Function");


Output:

[LOG]: "Interface for Function" 



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads