TypeScript Optional Parameters: A Complete Guide

TypeScript Optional Parameters: A Complete Guide

by

What is an Optional Parameters in TypeScript?

The Optional Parameters in TypeScript are used to make certain function parameters optional.

To denote a parameter as optional, simply add a question mark (?) after its name.

In addition to that, when a parameter is marked as optional, it simply means it’s not mandatory to provide a value for that parameter when calling the function.

Even if a function defines parameters, you can invoke it without supplying any arguments in JavaScript.

The TypeScript compiler thoroughly checks function calls, issuing an error if the number of arguments differs from the specified parameters or if the argument types don’t match the parameter types.

Syntax:

function sampleFunction(param1: type, param2?: type): returnType {
    // Function body
}

To understand the syntax, here’s the explanation:

  • param1 is a required parameter.
  • param2 is an optional parameter.

Please take that optional parameters must appear after required parameters in the parameter list.

If you try to make a required parameter follow with the optional one, then TypeScript compiler will definitely issue an error.

For instance:

function multiply(x: number, y: number, z?: number): number {
    if (typeof z !== 'undefined') {
        return x * y * z;
    }
    return x * y;
}

As you can see, in our example code above, the “z” parameter is optional.

The expression typeof z !== ‘undefined’ ensures that the argument is passed to the function.

Take note that using if (c) to check if an argument is uninitialized would treat an empty string or zero as undefined.

Here’s the complete example code:

function multiply(x: number, y: number, z?: number): number {
    if (typeof z !== 'undefined') {
        return x * y * z;
    }
    return x * y;
}

// Example usage:
const result1 = multiply(5, 10); // Result: 50
const result2 = multiply(5, 10, 15); // Result: 750

console.log(result1);
console.log(result2);

In our example code above:

  • The multiply function takes two required parameters (x and y) and one optional parameter (z).
  • If z is provided, it calculates the product of x, y, and z.
  • If z is not provided, it calculates the product of x and y.

Output:

50
750

How to use Optional Parameters in TypeScript?

Here’s the guide on how to use the Optional Parameters in Typescript:

Function Declaration

Start by defining your function. For this example, let’s create a function called multiply that takes three parameters: x, y, and an optional z.

Optional Parameter Syntax

Notice the c?: number part in the parameter list. The ? indicates that c is optional.

You can place the optional parameter anywhere in the parameter list, but it must follow any required parameters.

Using the Optional Parameter

Inside the function, check if “z” is provided. If it is, multiply all three parameters; otherwise, multiply only x and y.

function multiply(x: number, y: number, z?: number): number {
    if (typeof z !== 'undefined') {
        return x * y * z;
    }
    return x * y;
}

Calling the Function

You can call the multiply function with different arguments:

const result1 = multiply(5, 10); // Result: 50 (no third argument)
const result2 = multiply(5, 10, 15); // Result: 750 (with third argument)

Conclusion

The Optional parameters allow flexibility in function calls. If an optional parameter isn’t provided, TypeScript treats it as undefined.

Please take note, that optional parameters should appear after required parameters in the parameter list.

I hope this article has given you some insights and helped you understand the TypeScript Parameters.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment