Setting optional parameters in Functions using TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 27, 2022

banner

Photo from Unsplash

Setting optional parameters in Functions using TypeScript #

Use a question mark to set an optional parameter in a function in TypeScript, e.g. function sum(a: number, b?: number) {}. If set to optional, the parameter can have a type of undefined or the specified type, because unspecified parameters get the value undefined.

index.ts
// ✅ Optional parameter without default value function sum(a: number, b?: number) { if (b) { return a + b; } return a + a; } console.log(sum(10)); // 👉️ 20 console.log(sum(10, 3)); // 👉️ 13 // ✅ Optional parameter with default value function multiply(a: number, b = 10) { return a * b; } console.log(multiply(5)); // 👉️ 50 console.log(multiply(5, 2)); // 👉️ 10 // ✅ Optional property for object parameter function getEmployee({ name = 'Tom', salary, }: { name?: string; // 👈️ Mark optional salary: number; }) { return { name, salary }; } // 👇️ {name: 'Tom', salary: 100} console.log(getEmployee({ salary: 100 }));

In the first example, we marked the parameter b as optional.

This means that the function can be invoked without providing the parameter, which would set the value of the b argument to undefined.

Not providing the parameter and providing a parameter with a value of undefined is the same in JavaScript (and TypeScript).

index.ts
// ✅ Optional parameter without default value function sum(a: number, b?: number) { if (b) { return a + b; } return a + a; } // ✅ These 2 lines are the same console.log(sum(10)); // 👉️ 20 console.log(sum(10, undefined)); // 👉️ 20

Note that a required parameter cannot follow an optional parameter.

index.ts
// ⛔️ Error: A required parameter cannot // follow an optional parameter.ts(1016) function sum(a?: number, b: number) { }

You should always specify the optional parameters at the end of the function's parameter list.

You can also set a function parameter to optional implicitly - by providing a default value for it.

index.ts
// ✅ Optional parameter with default value function multiply(a: number, b = 10) { return a * b; } console.log(multiply(5)); // 👉️ 50 console.log(multiply(5, 2)); // 👉️ 10

Notice that we didn't have to use a question mark ? to set the parameter b as optional.

We also didn't have to type the parameter, because TypeScript is able to infer its type based on the default value.

You should always set default values at the end of a function's parameter list.

index.ts
// 👇️ default value at beginning function multiply(a = 10, b: number) { return a * b; } // ⛔️ Error: Expected 2 arguments, but got 1.ts(2554) console.log(multiply(5)); // 👉️ NaN // ✅ Works console.log(multiply(undefined, 5)); // 👉️ 50

Even though we provided a default value for the first parameter the function takes, it's not optional, because there is a second parameter that is required.

If you encounter this problem with 3rd party code and want to use the default value instead of providing your own, pass undefined for the specific parameter.

When you have a function that takes an object as a parameter, you might need to set properties in the object to optional or set the entire object to optional.

Here is an example that sets a property in an object parameter to optional.

index.ts
function getEmployee({ name = 'Tom', // 👈️ default value salary, }: { name?: string; // 👈️ Mark optional salary: number; }) { return { name, salary }; } // 👇️ {name: 'Tom', salary: 100} console.log(getEmployee({ salary: 100 }));

We set the name property in the object to optional and provided a default value for it.

You don't have to provide a default value if you don't need one, but you have to mark the property as optional even if you provide a default value.

Let's look at how you would set the entire object parameter to optional.

index.ts
function getEmployee({ name, salary, }: { name?: string; salary?: number } = {}) { return { name, salary }; } // 👇️ {name: undefined, salary: undefined} console.log(getEmployee());

We used a question mark to set all properties in the object to optional and provided an empty object as the default value.

Here is an example of how you would also provide default values for the object's properties.

index.ts
function getEmployee( { name, salary }: { name?: string; salary?: number } = { name: 'Tom', salary: 100, }, ) { return { name, salary }; } // 👇️ {name: 'Tom', salary: 100} console.log(getEmployee());

Notice that we have marked all properties on the object as optional and are passing a default value for the entire object, not for each property.

An important thing to remember is that when you have multiple, comma-separated parameters and set a default value, you don't have to mark the parameter as optional.

However, when you have an object parameter and you set a default value for a property, the property has to be marked as optional.

This is an important distinction, because if you mark all properties as optional and set default values for them, you would still have to pass an empty object to the function.

index.ts
function getEmployee({ name = 'Tom', salary = 100, }: { name?: string; salary?: number; }) { return { name, salary }; } // ⛔️ Error: Expected 1 arguments, but got 0.ts(2554) console.log(getEmployee()); // ✅ Works console.log(getEmployee({}));

In the example above, we set all of the properties in the object to optional and provided default values for them.

However, we are still required to pass the object when calling the function, because we didn't set a default value for the object itself.

If your function declaration looks too busy, you can use a type alias.

index.ts
type GetEmployeeParams = { name?: string; salary: number; }; function getEmployee({ name = 'Tom', salary }: GetEmployeeParams) { return { name, salary }; } console.log(getEmployee({ salary: 100 }));

This is a bit easier to read, as we can clearly see that the name property is set to optional and the function expects to be called with an object of type GetEmployeeParams.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.