Typescript Optional Parameters

TypeScript optional parameters allow you to declare some parameters in the function optional, so that clients do not need to pass values to optional parameters.

TypeScript is a strong typed language. When we declare parameters for a function, all the parameters are required, and the client has to pass values to every parameter. When the client has no value for any parameter, he can pass a null value or a blank value. By using the optional parameter feature, we don’t need to pass any value to the parameter. In this post, we will learn about TypeScript’s optional parameters with various examples.

Optional Parameter Syntax

We need to add a question mark “?” at the end of the parameter name to mark this parameter as optional. Below is the syntax.

function functionName(par1: number, par2?: number) {

}

In the above example, the par2 parameter is optional.

TypeScript Optional Parameters Example

function getSchool(name: string, address?: string, pinCode?: string): string {
    //...
}

var school = getSchool("Elementary");
var school2 = getSchool("Little Kid", "UK");  
var school3 = getSchool("Rose Tree School", "US", "99501")

In the getSchool function, two parameters—an address and a pin code—are optional parameters. In the first function call, we are only passing the name parameter. In the section function call, we are only passing name and address, and in the third function class, we are passing all parameters.

Optional Parameter Ordering

Optional parameters always come last in the parameter list of function. We can not put optional parameter first and then required parameters in the function like shown below:

function getSchool(var1?: number, var2: string) { } //ERROR

TypeScript throw below error message when we put optional parameter first from required parameters.

A required parameter cannot follow an optional parameter.

Optional Parameter Check

In function, we can check whether client has passed the parameter value or not. If parameter value is not passed, then default value is ‘undefined’. Below is the example:

function getSchool(name: string, address?: string, pinCode?: string): string {
    if (address == undefined) {
        console.log('address not defined');
    }
    if (pinCode == undefined) {
        console.log('pincode not defined');
    }
    //...
}

TypeScript Optional Parameter: Default Value

We can also define a default value for the optional parameter in TypeScript. The parameter default value must match the specified data type. For example, if we have a string data type, then the default value must be a string.

Below is an example of a default value.

function calculateDiscount(price: number, discount: number = 10) {
  return price - (price * (discount / 100));
}

console.log(calculateDiscount(1000));
console.log(calculateDiscount(100, 20));

In the above example, I have set discount as an optional parameter. We don’t need to put a “?” mark after the parameter. I have put the “=” sign after the discount data type and the default value.

In the first function call, I did not specify any value for the discount parameter, and it by default took 10 as the discount value. In the second function call, I specified the discount parameter value, and it took the 20 value in calculating a discount.

Summary

TypeScript’s optional parameters provide flexibility in functions. By adding a “?” to the parameter name, you mark the parameter as optional. These optional parameters must follow the required ones. TypeScript also allows default values for the parameters, which makes them optional.