TypeScript Optional Parameters

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

In TypeScript, optional parameters are function parameters whose arguments may or may not be passed later in the program.

They are indicated by the ? symbol after the parameter name.

// Function with optional parameter num3
function sum(num1: number, num2: number, num3?: number) {
    if (typeof num3 === "undefined")
        return num1 + num2;
    return num1 + num2 + num3;
}

// Don't pass optional argument
let result: number = sum(5, 10);
console.log(result);

// Output: 15

Example: TypeScript Optional Parameters

Let's rewrite the previous example to pass an argument to the optional parameter as well.

// Function with optional parameter num3
function sum(num1: number, num2: number, num3?: number) {

    // If num3 is not passed, its data type will be undefined
    // In that case, return num1 + num2
    if (typeof num3 === "undefined")
        return num1 + num2;

    // Else, return sum of all three parameters
    return num1 + num2 + num3;
}

// Don't pass optional argument
let result: number = sum(5, 10);
console.log(`Sum without optional argument: ${result}`);

// Pass optional argument
result = sum(5, 10, 15);
console.log(`Sum with optional argument: ${result}`);

Output

Sum without optional argument: 15
Sum with optional argument: 30

Here's how the program works:

1. When sum(5, 10) is called.

• num1 is 5, num2 is 10, and num3 is undefined.
• As a result, the code inside the if statement is executed.
• Thus, sum() will return num1 + num2, i.e., 15.

2. When sum(5, 10, 15) is called.

• num1 is 5, num2 is 10, and num3 is 15.
• As a result, the code inside the if statement is not executed.
• Thus, sum() will return num1 + num2 + num3, i.e., 30.

Optional Parameters Should Come After Required Parameters

If your function has both optional and required parameters, you should place the optional parameters after the required ones. Otherwise, TypeScript will give an error. For example,

// Valid because optional parameter num3 comes
// after the required parameters num1 and num2
function sum(num1: number, num2: number, num3?: number) {
    if (typeof num3 === "undefined")
        return num1 + num2;
    return num1 + num2 + num3;
}


// Invalid because the optional parameter num1 comes first
function difference(num1?: number, num2: number, num3: number) {
    if (typeof num3 === "undefined")
        return num2 - num3;
    return num1 - num2 - num3;
}

Note: You'll also get an error if you place your optional parameters between required parameters.

Type Checking for Optional Parameters

An optional parameter will have undefined as a value if no argument is passed to it.

Thus, it's necessary to check whether your optional parameters are undefined or not if you're using them inside your function.

Not performing this simple check can lead to unexpected behavior in your program.

// Bad Practice: num3 is possibly undefined
function sum(num1: number, num2: number, num3?: number) {

    return num1 + num2 + num3;
}

let result: number = sum(5, 10);
console.log(result);

Output

NaN

Here, we got NaN (Not a Number) as an output instead of 15 (the sum of arguments 5 and 10).

This is because num3 is undefined, and adding it to numerical values results in NaN.

Also Read:

• TypeScript Function and Function Expressions
• TypeScript Default Parameters
• TypeScript Rest Parameters