To make the function parameters optional, we can use the ? symbol (question mark) after the parameter name when defining function in TypeScript.
TL;DR
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
return name ? `Hey ${name}` : `Hey Person`;
}
// call the function
sayGreeting("John Doe"); // Hey John Doe
// call the function
// but with no value
sayGreeting(); // ✅ Ok. Hey Person
For example, let's say we have a simple function called sayGreeting which has a parameter called name and returns a greeting with the name value.
It may look like this,
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
return `Hey ${name}`;
}
Now if we call the above function with John Doe as an argument, it will return the string Hey John Doe which is the correct behavior.
It can be done like this,
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
return `Hey ${name}`;
}
// call the function
sayGreeting("John Doe"); // Hey John Doe
Let's try to call the sayGreeting function and pass no value as an argument to the function like this,
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
return `Hey ${name}`;
}
// call the function
sayGreeting("John Doe"); // Hey John Doe
// call the function
// but with no value
sayGreeting(); // ❌ Error. Expected 1 arguments, but got 0.
As you can see that the TypeScript compiler shows us an error that says Expected 1 arguments, but got 0.. In simple terms, it means that we need to pass at least one value as an argument to the function.
So to make the name parameter as an optional argument we can use the question mark symbol (?) before the parameter name like this,
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
return `Hey ${name}`;
}
// call the function
sayGreeting("John Doe"); // Hey John Doe
// call the function
// but with no value
sayGreeting(); // ✅ Ok.
Now everything is good ✅.
Now to avoid the undefined value if no value is passed to the name parameter we can add a ternary operator check to see if the name parameter is empty and return the result according to it.
It can be done like this,
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
return name ? `Hey ${name}` : `Hey Person`;
}
// call the function
sayGreeting("John Doe"); // Hey John Doe
// call the function
// but with no value
sayGreeting(); // ✅ Ok. Hey Person
Yay! 🥳. We have successfully made an optional function parameter in TypeScript.
See the above code live in codesandbox.
That's all 😃!
