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.