EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Function Interface
Secondary Sidebar
TypeScript Tutorial
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains

TypeScript Function Interface

TypeScript Function Interface

Introduction to TypeScript Function Interface

In TypeScript we can use interface as different type in which one of them is to use as a function type. By the use of function interface in TypeScript we can define method signature inside the function interface. They are the same and easy-to-use keys like normal interface in TypeScript only difference is we can define a function inside it and they can be used according to the requirement, like the same function from the interface can be used to add, delete or update the data.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

As discuss they are similar to any other interface type in TypeScript. Inside them, we can define our function signature.

Let’s see its syntax in more detail for better usage inside the application to make it more efficient:

interface interface_name_here
{
(your variable1, your variable 2): return type;
};

As you can see in the above lines of syntax we are just using ‘interface’ keyword here, also inside it we are declaring our function which can be used further.

Let’s see one practice syntax to understand:

interface Demo
{
(a:string, b:string, c:string): string;
};

In the above lines of syntax, as you can see it is very easy to declare a function interface in TypeScript.

How does Function Interface work in TypeScript?

As we already know now that in TypeScript we can create different types of interfaces. One of them is the function interface inside which we can define or declare our function signature which can be used later to have its body and implementation. If we discuss it more general then we can use the same function to add, update or delete our data which is based on the same parameter. The interface in general a contract between the application. Also if we define any method inside the interface then its implementation should be provided by the class which is the implementation of that interface in the application. This provides the layer of abstraction inside the application.

Let’s see the types of interfaces available :

1. Interface as array

Inside this interface, we can define the type of array.

syntax:

interface name_interface {
[val:type]:type
}

By using this we can define a type of array also we can define index type and value type as well.

2. Interface as type

This interface can be used to define the type of variable present inside the interface.

syntax:

interface name_interface {
variable_name: type;
// logic goes here .
}

In the above lines, we are just using ‘interface’ keyword and defining the variable types inside it. Let’s see one sample example to understand the internal working of the function interface in TypeScript.

Example:

Code:

interface AddvalueFunction
{
(a: number, b: number): number;
};
function adding(a:number, b:number):number {
return a + b;
}
let obj1: AddvalueFunction = adding;
let result = obj1(100, 200);
console.log(result)

Here we are creating one function interface in TypeScript. Firstly we are creating ‘AddvalueFunction’ interface which contains the function signature, which is responsible to add two numbers in TypeScript. But here we have also defined the signature of the method, not the implementation. After this, we are providing the implementation of the ‘AddvalueFunction’ interface function.

Which is going to return a number that would be some of these two values. But here we need to pay attention while creating the object for the interface, we just mention the interface name and assign it the function name which contains the implementation of the function interface. Immediately after this we can pass our required arguments to it and get the result. In the above on it will print the result of the two.

Example

Given below is the example :

In this example we are trying to show the working of function interface in Typescript, we have provided several implementations of the same method in Typescript which perform add, subtract, multiple, and divide for the same type of input we pass as param in the method.

Code:

interface AddvalueFunction
{
(a: number, b: number): number;
};
function adding(a:number, b:number):number {
console.log("Inside this function we are adding the values passed !!!");
console.log("value one is ::" + a);
console.log("value two is ::" + b);
return a + b;
}
function multiply(a:number, b:number):number {
console.log("Inside this function we are multiplying the values passed !!!");
console.log("value one is ::" +a);
console.log("value two is ::" +b);
return a * b;
}
function divide(a:number, b:number):number {
console.log("Inside this function we are divide the values passed !!!");
console.log("value one is ::" +a);
console.log("value two is ::" +b);
return a / b;
}
function subtract(a:number, b:number):number {
console.log("Inside this function we are subtracting the values passed !!!");
console.log("value one is ::" +a);
console.log("value two is ::" +b);
return a - b;
}
console.log("Demo to show function interface in Typescript !!!!!!")
let obj1: AddvalueFunction = adding;
let result1 = obj1(100, 200);
let obj2: AddvalueFunction = multiply;
let result2 = obj2(50, 50);
let obj3: AddvalueFunction = divide;
let result3 = obj3(2500, 5);
let obj4: AddvalueFunction = subtract;
let result4 = obj4(45000, 2500);
console.log("printing the result here for each function implementation ..")
console.log("result for add is  :: " +result1)
console.log("result for multiply is  :: " +result2)
console.log("result for divide is  :: " +result3)
console.log("result for subtract is  :: " +result4)

Output:

TypeScript Function Interface 1

Rules and Regulation for Function Interface

There are few rules which need to be taken into consideration while working with the function interface in TypeScript:

  • Function interface should only contain the method signature, not implementation.
  • The interface should be created by using the ‘interface’ keyword followed by interface name.
  • While creating the object for the interface function, it should refer to the implemented function.
  • While defining the function inside the interface variable type and function return type should be properly mentioned.
  • While giving the implementation for the functional interface method signature should be matched properly otherwise it will not work.

Conclusion

By the use of a function interface, we can give any implementation to the method and can be used anywhere in the program. We just need to have a similar method signature like the function interface type method in TypeScript.

Recommended Articles

We hope that this EDUCBA information on “TypeScript Function Interface” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. TypeScript Cast Object
  2. TypeScript let
  3. TypeScript Generic
  4. What is TypeScript?
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more