Typescript is capable of defining Interfaces for functions. In this tutorial, we will learn how to define an interface for function types and use it.
Table of Contents
Creating Interface for Function Types
To create an interface for function type use the keyword interface followed by the interface name. Then follow It up with curly brackets {}. Inside the curly braces { } add the list of parameters (comma-separated) inside parentheses. Follow it up with a semicolon : and return type.
In the following example, the Calculator is an interface that describes a function. The function takes two arguments and returns a number.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //interface interface Calculator { (arg1:number,arg2:number):number } //implementation let calculator:Calculator = function(arg1:number,arg2:number) { return arg1+arg2; } //invoking calculator(10,20) //30 |
The parameter names need not match. Hence the above can also be written as follows. Note that we have used num1 & num2 instead of arg1 & arg2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //interface interface Calculator { (arg1:number,arg2:number):number } //implementation let calculator:Calculator = function(num1:number,num2:number) { return num1+num2; } //invoking calculator(10,20) //30 |
But data types need not be the same but they must be compatible. For Example in the implementation function, you can use unknown or any as both are compatible with number type. But string or booleans are not allowed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //interface interface Calculator { (arg1:number,arg2:number):number } //implementation let calculator:Calculator = function(num1:unknown,num2:unknown) { return (num1 as number)+(num2 as number); } //invoking calculator(10,20) //30 |
Typescript compiler throws an error if we try to use more arguments or arguments of incompatible data types to the implementation function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //interface interface Calculator { (arg1:number,arg2:number):number } //implementation let calculator:Calculator calculator = function(num1:number,num2:number, num3:number) { //Error return num1+num2; } //Type '(num1: number, num2: number, num3: number) => number' is not assignable to type 'ICalculator'. //invoking calculator(10,20) //30 |
But less number of arguments in the implementation function is ok.
Interface for functions Examples
The following are some of the examples of how you can create an interface for various function types.
This interface takes a single string argument and returns a string.
1 2 3 4 5 6 7 8 9 10 11 12 | //interface interface DoSomething { (arg1:string):string } //implementation let doSomething:DoSomething = function(arg1:string) { return arg1; } |
This interface takes no arguments and returns nothing
1 2 3 4 5 6 7 8 9 10 11 | //interface interface DoSomething { ():void } //implementation let doSomething:DoSomething = function() { return } |
Takes an argument and returns nothing
1 2 3 4 5 6 7 8 9 10 11 | //interface interface DoSomething { (arg1:string):void } //implementation let doSomething:DoSomething = function(arg1:string) { return } |
The function with an optional argument. Note that if the interface declares an optional argument then the implementation function must also declare it as optional.
1 2 3 4 5 6 7 8 9 10 11 12 | //interface interface DoSomething { (arg1?:string):string } //implementation let doSomething:DoSomething = function(arg1?:string) { if (typeof arg1=="string") return arg1 return ""; } |
Similarly, the following examples show how you can create an interface for types that contain a function.
1 2 3 4 5 6 | interface Employee { name: string; dosomething(arg1:string):number } |
The function is optional here
1 2 3 4 5 6 | interface Employee { name: string; dosomething?(arg1:string):number } |
The implementation function is not enforced to implement all the arguments
The Typescript does not enforce us to implement all the arguments of the interface. But the caller must supply all the required arguments.
In this example, the Calculator interface declares three arguments. But in the implementation function, we have omitted the third argument and the compiler does not complain.
1 2 3 4 5 6 7 8 9 10 | //interface interface Calculator { (num1:number,num2:number, num3:number):number } //implementation let calculator:Calculator = function(num1:number, num2:number) { //No error return num1+num2; } |
But if we invoke the function with two arguments, the compiler will throw an error.
1 2 3 4 5 6 | //invoking calculator(10,10) //Error Expected 3 arguments, but got 2. calculator(10,10,10) //No Error |
But note that the implementation function cannot use more arguments than specified in the interface.
