by DuttaluruVijayakumar Updated : Oct 30, 2019 in Articles

types of functions and parameters in typescript

in this article, we will learn about types of functions and parameters in the typescript Step by step

Before going to discuss types of functions in typescript we will discuss first parameters in typescript

Concepts in In this article

Optional and Default Parameters
Rest Parameters
Function Overloading
Function Types

Optional and Default Parameters in typescript

“?” is used for optional parameters.

“?” should not be used if the parameter has a default value.

function add1(x: number, y: number, z?: number): number {
if (!z)
z = 0;
return x + y + z;
};
function add2(x: number, y: number, z: number = 0): number {
return x + y + z;
};
alert(add1(10, 20))
alert(add2(10, 20))

Note: Unlike plain optional parameters, default-initialized parameters don’t need to occur after the required parameters.

If a default-initialized parameter comes before a required parameter, users need to explicitly pass undefined to get the default initialized value.

function add2(x: number = 0, y: number, z: number): number {
return x + y + z;
};
alert(add1(undefined, 10, 20))

Rest Parameters in typescript

Sometimes, you want to work with multiple parameters as a group, or you may not know how many parameters a function will ultimately take. In JavaScript, you can work with the arguments directly using the arguments variable that is visible inside every function body.

In TypeScript, you can gather these arguments together into a variable:

function add(x: number, ...numbers: number[]): number {
for (var i = 0; i < numbers.length; i++)
x += numbers[i];
return x;
};
alert(20)
alert(add(20, 30, 40))
alert(add(20, 30, 40, 50))
alert(add(20, 30, 40, 50, 60))

Function Overloading in typescript

We need to supply multiple function types for the same function as a list of overloads. This list is what the compiler will use to resolve function calls.

Let’s create a list of overloads that describe what our “add” function accepts and what it returns

function add(x: string, y: string): string;
function add(x: number, y: number): number; //Function Implementation
function add(x, y): any {
if (typeof x == "number")
return x + y;
else
return x + " " + y;
};
alert(add(20, 30)) //valid
alert(add("A", "B")) //valid
//alert(add(true, "B")) //invalid

Note: that the function add(x,y): any piece is not part of the overload list, so it only has two overloads: one that takes two numbers and one that takes two strings. Calling add with any other parameter types would cause an error.

Function Types in typescript

While writing a function, we can add types to each of the parameters and then to the function itself which is the return type.

TypeScript can figure the return type out by looking at the return statements, so we can also optionally leave this off in many cases.

A function’s type has the same two parts:

The type of arguments.
The return type.

let add1: (x: number, y: number) => number
add1 = function (x: number, y: number): number {
return x + y;
};
//OR the compiler can infer the types while writing the function
function add(x, y) {
return x + y;
};
let add2: (x: number, y: number) => number
add2 = add;
alert(add1(20, 30))
alert(add2(20, 30))

thanks ..

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more