TypeScript Function Parameter

Functions are the basic building block of any application which holds some business logic. The process of creating a function in TypeScript is similar to the process in JavaScript.

In functions, parameters are the values or arguments that passed to a function. The TypeScript, compiler accepts the same number and type of arguments as defined in the function signature. If the compiler does not match the same parameter as in the function signature, then it will give the compilation error.

We can categorize the function parameter into the three types:

• Optional Parameter
• Default Parameter
• Rest Parameter

Optional Parameter

JavaScript allows us to call a function without passing any arguments. Hence, in a JavaScript function, the parameter is optional. If we declare the function without passing arguments, then each parameter value is undefined.

Unlike JavaScript, the TypeScript compiler will throw an error if we try to invoke a function without providing the exact number and types of parameters as declared in its function signature. To overcome this problem, TypeScript introduces optional parameter. We can use optional parameters by using the question mark sign ('?'). It means that the parameters which may or may not receive a value can be appended with a "?" sign to mark them as optional. In the below example, e_mail_id is marked as an optional parameter.

function function_name(parameter1[:type], parameter2[:type], parameter3 ? [:type]) { }

function showDetails(id:number,name:string,e_mail_id?:string) { 
   console.log("ID:", id, " Name:",name); 
   if(e_mail_id!=undefined)  
   console.log("Email-Id:",e_mail_id); 
}
showDetails(101,"Virat Kohli");
showDetails(105,"Sachin","sachin@rookienerd.com");

Default Parameter

TypeScript provides an option to set default values to the function parameters. If the user does not pass a value to an argument, TypeScript initializes the default value for the parameter. The behavior of the default parameter is the same as an optional parameter. For the default parameter, if a value is not passed in a function call, then the default parameter must follow the required parameters in the function signature. However, if a function signature has a default parameter before a required parameter, we can still call a function which marks the default parameter is passed as an undefined value.

function function_name(parameter1[:type], parameter2[:type] = default_value) { }

function displayName(name: string, greeting: string = "Hello") : string {
    return greeting + ' ' + name + '!';
}
console.log(displayName('rookienerd'));   //Returns "Hello rookienerd!"
console.log(displayName('rookienerd', 'Hi'));   //Returns "Hi rookienerd!".
console.log(displayName('Sachin'));    //Returns "Hello Sachin!"

Rest Parameter

It is used to pass zero or more values to a function. We can declare it by prefixing the three "dot" characters ('...') before the parameter. It allows the functions to have a different number of arguments without using the arguments object. The TypeScript compiler will create an array of arguments with the rest parameter so that all array methods can work with the rest parameter. The rest parameter is useful, where we have an undetermined number of parameters.

Rules to follow in rest parameter:

• We can use only one rest parameter in a function.
• It must be an array type.
• It must be the last parameter in a parameter list.

function function_name(parameter1[:type], parameter2[:type], ...parameter[:type]) { }

function sum(a: number, ...b: number[]): number {
  let result = a;
  for (var i = 0; i < b.length; i++) {
  result += b[i];
  }
  return result;
}
let result1 = sum(3, 5);
let result2 = sum(3, 5, 7, 9);
console.log(result1 +"\n" + result2);