Optional Parameters in TypeScript are used when passing a value to a parameter of a function is optional. In this tutorial, we will learn what is Optional parameters, how to create a function with optional parameters. Will also learn the effect of strict null checks on optional parameter
Table of Contents
Need for Optional Parameters
JavaScript functions allow us the pass an arbitrary number of arguments to a function. It does not throw any errors. For example, the following is a perfectly valid code in JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function addNum(a, b) { return a + b ; } //0 Argument. Both a & b is initialzed as undefined console.log(addNum()); //Nan //1 Argument b is initialzed as undefined console.log(addNum(1)); //Nan //2 Argumnets console.log(addNum(1,2)); //3 //3 Arguments last argument 3 is ignored console.log(addNum(1,2,3)); //3 |
The above code in TypeScript results in a Compiler error
1 2 3 4 5 6 7 8 9 10 11 12 | function addNum(a:number, b:number):number { return a + b ; } console.log(addNum()); //Expected 2 arguments, but got 0. console.log(addNum(1)); //Expected 2 arguments, but got 1. console.log(addNum(1,2)); //ok. 3 console.log(addNum(1,2,3)); //Expected 2 arguments, but got 3. |
There are two issues here
- Passing fewer arguments than the number of parameters
- Passing more arguments than the number of parameters
We use the optional parameters to solve the first issue and the rest parameters for the second use case
Optional Parameters
Optional Parameters in TypeScript are used when passing a value to a parameter of a function is optional. We do that by appending a ? after the parameter name.
In the following example, c is optional as we have appended ? after it.
1 2 3 4 5 6 7 8 9 10 11 12 | function addNumber(a: number, b: number, c?: number): number { if (typeof c !== 'undefined') { return a + b + c; } return a + b; } addNumber(1,2,3) //6 addNumber(1,2) //3 //No Error |
If we do not pass any value to an optional parameter, then its value is set to undefined. That is why we need to check the value of an optional parameter before using it. TypeScript compiler also throws the error Object is possibly 'undefined' if we use it before checking for undefined.
1 2 3 4 5 6 7 8 9 | function addNumber(a: number, b: number, c?: number): number { return a + b+ c; //Object is possibly 'undefined'. } addNumber(1,2,3) //6 addNumber(1,2) //3 |
We must declare the optional parameters after the required parameters in the parameter list. The optional parameter before the required parameter will result in an error. In the following example, we made b Optional instead of c. The compiler throws A required parameter cannot follow an optional parameter error.
1 2 3 4 5 6 7 8 9 10 11 | function addNumber(a: number, b?: number, c: number): number { if (typeof b !== 'undefined') { return a + b + c; } return a + c; } //A required parameter cannot follow an optional parameter. |
Strict Null Checks
If Settings of Strict Null Checks is set to true, then TypeScript converts the type of optional parameter to a union type.
For example, in the following code data type of c becomes number | undefined. Because of this, the following code throws an error
1 2 3 4 5 6 | function addNumber(a: number, b: number, c?: number): number { return a + b + c; //Object is possibly 'undefined'. } |
But if we set Strict Null Checks is set to false, the type of c stays as a number. Due to this, the above code will not throw any error
Optional Parameters Vs Undefined
Instead of an optional parameter, we can assign a union type with undefined to the optional parameter. In the following example, the optional parameter of c is of type number. Hence we create a union-type of number | undefined.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function addNumber(a: number, b: number, c: number|undefined): number { if (typeof c !== 'undefined') { return a + b + c; } return a + b; } addNumber(1,2,3) //6 addNumber(1,2,undefined) //3 //Error. Third parameter is required addNumber(1,2) //Expected 3 arguments, but got 2. |
This works very similarly to optional parameters except for the fact that we cannot omit the parameter. We need to supply undefined in case of no value.
On the other hand, we can make the parameter in any position undefined. While optional parameters must appear after the required parameters.
References
Read More
