Omit one optional parameter while providing another in TS

avatar

Borislav Hadzhiev

Last updated: Mar 4, 2022

banner

Photo from Unsplash

Omit one optional parameter while providing another in TS #

To omit one optional parameter, while providing another in a TypeScript function, pass an undefined value for the optional parameter you want to omit and provide the value for the next, e.g. logArguments(100, undefined, ['a', 'b', 'c']).

index.ts
function logArguments(num: number, str?: string, arr?: string[]) { console.log(num); console.log(str); console.log(arr); } // 👇️ omit second parameter (providing 3rd) logArguments(100, undefined, ['a', 'b', 'c']); // 👇️ omit third parameter logArguments(100, 'hello'); // 👇️ omit second and third parameters logArguments(100);

The logArguments function has 2 optional parameters - the second and third in its parameter list.

If we need to omit the second parameter and provide a value for the third, we have to pass a value of undefined for the second parameter.

Passing an undefined value for a function parameter is the same as not providing a value at all.

If you don't pass a value for an optional parameter, the parameter gets assigned a value of undefined.

Note that a required parameter cannot follow an optional parameter.

index.ts
// ⛔️ Error: A required parameter cannot // follow an optional parameter.ts(1016) function logArguments(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
function logArguments(num: number, str = 'hello world', arr?: string[]) { console.log(num); console.log(str); console.log(arr); } // 👇️ omit second parameter (providing 3rd) logArguments(100, undefined, ['a', 'b', 'c']); /** * Values logged: 👇️ * 100 * "hello world" * ['a', 'b', 'c'] */

We set a default value for the second parameter of the function. This effectively makes the str parameter optional.

We passed an undefined value for the parameter when calling the function, which means that the value of str in the function's body will be hello world.

Notice that we didn't have to use a question mark ? to set the parameter str 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
function logArguments(num = 100, str: string) { console.log(num); console.log(str); } // ⛔️ Error: Expected 2 arguments, but got 1.ts(2554) logArguments(100); // ✅ Works logArguments(undefined, 'hello');

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.
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.