Function Parameter

Functions serve as the fundamental components of any application, encapsulating essential business logic. The methodology for defining a function in TypeScript closely mirrors that found in JavaScript.

In functions, parameters refer to the values or arguments that are supplied to a function. The TypeScript compiler requires that the number and type of arguments provided match those specified in the function signature. If there is a discrepancy between the provided parameters and those defined in the function signature, the compiler will produce a compilation error.

The function parameters can be classified into three distinct types:

• ✅ Optional Parameter
• ✅ Default Parameter
• ✅ Rest Parameter

Optional Parameter

JavaScript enables us to invoke a function without providing any arguments. Therefore, parameters in a JavaScript function are optional. When a function is defined without any arguments, the value of each parameter will be undefined.

In contrast to JavaScript, the TypeScript compiler generates an error when a function is called without supplying the precise number and types of arguments specified in its function signature. To address this issue, TypeScript incorporates optional parameters. Optional parameters can be defined by appending a question mark ('?') to the parameter name. This indicates that the parameters that may or may not be assigned a value can be designated as optional by using the "?" symbol. In the following example, emailid is designated as an optional parameter.

Syntax

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

Example

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@logic practice.com");

Output:

Default Parameter

TypeScript allows for the assignment of default values to function parameters. When a user omits a value for an argument, TypeScript assigns the predefined default value to that parameter. The functionality of default parameters mirrors that of optional parameters. In the case of default parameters, if no value is provided during a function invocation, these parameters must be positioned after all required parameters in the function definition. Nonetheless, if a function signature includes a default parameter preceding a required parameter, it is still possible to invoke the function, treating the default parameter as if it were supplied with an undefined value.

Note: We cannot make the parameter default and optional at the same time.

Syntax

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

Example

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

Output:

Rest Parameter

It serves to provide zero or more values to a function. This can be declared by placing three dot characters ('...') before the parameter name. It enables functions to accept a varying quantity of arguments without relying on the arguments object. The TypeScript compiler generates an array of arguments using the rest parameter, allowing all array methods to function with it. The rest parameter is particularly beneficial when dealing with an unspecified 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.

Syntax

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

Example

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);

Output: