Introduction to TypeScript Optional Parameters
In typescript, the optional parameter is defined as a parameter that can be made optional while passing the values when the function is called and the values that are passed when the function is called is printed with no errors but when the functions have declared the parameters that are ending with “?” are marked as optional parameters and only those parameter’s values may or may not be passed it will not throw any error. In general, the optional parameter as the name suggests we can make the parameters of the function optional for passing the values when the function is called without any errors and such feature is provided in typescript.
Working of Optional Parameters in Typescript with Examples
In this article, we will discuss the optional parameters feature provided in the typescript. The optional parameter means making the parameters optional for passing the values when the function is called without throwing any error. Therefore the developers or clients may or may not require to pass all the values to all the parameters declared in the function so in such case when there is no need of passing the value then we can make that parameter optional. In Typescript, making optional parameters is done by appending the “?” at the end of the parameter name in the function when declaring the parameters and the parameters which are not marked with “?” i.e not optional parameter are called as default parameters or normal parameters where it is must and compulsory to pass the values to these default parameters else it will throw an error saying too many parameters because it will be expecting the same number of values to be passed for the same number of default parameters declared in the function. We should note that whenever we are making any parameter as an optional parameter in the function it is a must that any optional parameter must be followed by one or more default parameters in the function. Therefore always make sure to have at least one default parameter with an optional parameter because sometimes it may cause ambiguity and also may lead to error as if no values are passed at all to the function then the code within the function will not execute which will again throw an error.
Now let us see the syntax of how to declare optional parameters along with examples in the below section.
Syntax:
function func_name(parameter1, parameter2?)
{
Set of code or instructions
}
In the above syntax, we can see we have two parameters in the above function parameter1 is the default parameter and parameter2 is appended with “?” which is an optional parameter. So where parameter2 can be optional such as there is no compulsion of passing values when the function func_name is called and the parameter1 value must be passed as it is compulsory else it will throw an error and when the function has two parameters and among them, if one is optional then while calling function only one value can be passed. we can additionally check if the parameters are been initialized or not by using the “typeof (parameter_name) ! = = ‘undefined’ ” expression as making it as a condition in the “if” statement where when we are returning the result having all three parameters which may sometime lead to an error saying the required parameter cannot be followed as an optional parameter.
Example #1
Code:
function add(a: number, b: number, c?: number): number {
console.log("Addition of two numbers is ")
return a + b;
}
console.log("Demonstration of optional parameter in Typescript")
let res = add(2,3)
console.log(res)
//let res1 = add(3)
//console.log(res1)
4.5 (6,815 ratings)
View Course
Output:
In the above program, we can see first we have defined a function for calculating the addition of two numbers and further, we may require to calculate the addition of three numbers also, therefore we are declaring 3 parameters “a”, “b”, and “c” and making last parameter “c” as optional parameter and rest as default parameters. In this program, we are returning only the result of the addition of two numbers only so there is no need for the third parameter and hence we have not used it within the function code as it is an optional parameter. Later, when we are calling the function and are passing only 2 values for parameter “a” and “b” and tried to print the result using the “res” variable which prints the added value as “5’ because we have passed values for “a’ as 2 and for “b” as 3 which gives the result as “2 + 3 = 5” where this output can be seen in the first screenshot. When we try to execute the function that is called with only one value passed to it which will throw an error saying expected 2-3 arguments but got only one because we have not marked the second parameter as an optional parameter and hence it will throw an error.
Now let us see another example for demonstrating the optional parameter and using this parameter within the function code in the below section.
Example #2
Code:
function display(Inst_name: string, Course_name?: string): void {
console.log(" The Institution name is given as: ")
console.log(Inst_name)
console.log(" The Course provided is given as: ")
console.log(Course_name)
}
console.log(" Demonstration of using optional parameter within the function code")
display("Educba")
display("Educba", "Python")
Output:
In the above program, we can see we have defined a function “display()” with two parameters in which one is marked as an optional parameter. Then within the function are printing the values of both parameters when the function is called by passing the values. In this program, when we call a function with passing only one value then it will take the value of the optional parameter as “undefined” and print it in the output because in the function we are printing both the values of the parameter which is marked as optional also. Therefore to avoid this “undefined” value in the output we can use “typeof(parameter_name ! = = ‘undefined’ ” in the “if” statement so that can be done by correcting the above code as below:
function display(Inst_name: string, Course_name?: string): void {
console.log(" The Institution name is given as: ")
console.log(Inst_name)
if (typeofCourse_name !== 'undefined')
{
console.log(" The Course provided is given as: ")
console.log(Course_name)
}
}
console.log(" Demonstration of using optional parameter within the function code")
display("Educba")
display("Educba", "Python")
Output:
Now in the above screenshot we can see though we have not passed any value for the optional parameter it will not display “undefined” it will only print the value passed to the default parameter.
Conclusion
In this article, we conclude that the optional parameter in Typescript is also a parameter having the type that can be made optional where the passing of the values to such parameters can be omitted and marking parameter as optional is done by appending “?” at the end of the parameter. In this article, we saw a simple example of how to declare optional parameters. Then we also saw what will the value be printed when the parameter is marked optional and the value is also made to be printed then how it can be avoided by printing “undefined” value.
Recommended Articles
This is a guide to TypeScript Optional Parameters. Here we also discuss the introduction and working of optional parameters in typescript along with different examples and its code implementation. You may also have a look at the following articles to learn more –
