Set default values for function Parameters in TypeScript

avatar

Borislav Hadzhiev

Sun Feb 27 20224 min read

banner

Photo by Luke Porter

Set default values for function Parameters in TypeScript #

To set a default value for a function parameter, use an equal sign right after the parameter name, e.g. function multiply(num: number, by = 10) {}. If a value for the parameter is not provided, the argument will be replaced with the default value.

index.ts
// ✅ With multiple parameters function multiply(num: number, by = 10) { return num * by; } console.log(multiply(10)); // 👉️ 100 console.log(multiply(5, 20)); // 👉️ 100 // ✅ With object parameter function getPerson( { name = 'James', age }: { name?: string; age: number } ) { return { name, age }; } console.log(getPerson({ age: 30 }));

In the first example, we have a function that takes 2 numbers as parameters.

We typed the num parameter as a number and provided a default value for the by parameter.

We didn't have to explicitly type the by parameter, because TypeScript can infer its type based on the default value.

If the multiply function is invoked without a value for the by parameter, or is explicitly passed undefined, the argument will be replaced with the default value of 10.

index.ts
function multiply(num: number, by = 10) { return num * by; } // ✅ These 2 calls are the same console.log(multiply(10)); // 👉️ 100 console.log(multiply(10, undefined)); // 👉️ 100

Note that default values for parameters are only allowed at the end of the parameter list.

index.ts
function multiply(num = 5, by: number) { return num * by; } // ⛔️ Error: Expected 2 arguments, but got 1.ts(2554) console.log(multiply(10)); // ✅ This works console.log(multiply(undefined, 10)); // 👉️ 50

We set a default value for the num parameter, but didn't set a default value for the by parameter.

Because num is the first parameter in the list, TypeScript will expect us to provide a value for it when calling the multiply function.

You could pass undefined for the num parameter when calling the function to use the default value, but an even better solution is to convert the parameters to an object.

index.ts
function multiply( { num = 5, by }: { num?: number; by: number } ) { return num * by; } console.log(multiply({ by: 10 }));

The ordering of the object's properties does not matter in the example.

Notice that we set the num parameter to be optional by using a question mark ?.

Even though we've provided a default value for the num parameter, we still have to mark it as optional, otherwise TypeScript will expect us to provide it.

Sometimes you might have default values for all properties in an object.

If that's the case, you should provide a default value for the object itself and not for each individual property.

index.ts
function multiply( { num, by }: { num: number; by: number } = { num: 10, by: 5 }, ) { return num * by; } console.log(multiply()); // 👉️ 50

Notice that we provided a default value for the object parameter as a whole and not for each individual property.

When providing a default value for the object parameter, you should do it by using an equal sign = right after the parameter's type.

This is better than providing a default value for each individual property in the object. Let's look at an example.

index.ts
function multiply( { num = 10, by = 5 }: { num?: number; by?: number } ) { return num * by; } // ⛔️ Error: Expected 1 arguments, but got 0.ts(2554) console.log(multiply()); // ✅ Works as expected console.log(multiply({}));

We set all of the object's properties to optional by using a question mark ? and provided a default value for each property.

However, we haven't provided a default value for the object itself, so TypeScript still expects us to pass an empty object when calling the function.

Make sure to provide a default value for the object when you have default values for all of its properties.

A very tricky thing when working with default values for object parameters is that you have to mark the property as optional by using a question mark ?, even though you have set a default value for the property.

index.ts
function multiply( { num = 10, by = 5 }: { num: number; by: number } ) { return num * by; } // ⛔️ Error: Argument of type '{}' is not assignable // to parameter of type '{ num: number; by: number; }'. console.log(multiply({}));

Notice that we set default values for the num and by properties, but didn't mark their type as optional.

Always make sure to mark object properties as optional when setting a default value for them.

index.ts
function multiply( { num = 10, by = 5 }: { num?: number; by?: number } ) { return num * by; } // ✅ Works as expected now console.log(multiply({})); // 👉️ 50

This is tricky, because you don't have to mark non-object parameters as optional when they have a default value.

index.ts
// 👇 not set to optional function multiply(num: number, by = 10) { return num * by; } console.log(multiply(10)); // 👉️ 100

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

index.ts
type MultiplyParams = { num?: number; by: number; }; function multiply({ num = 10, by }: MultiplyParams) { return num * by; } console.log(multiply({ by: 10 })); // 👉️ 100

This is a bit easier to read, as we can clearly see that the num property has a default value and the function expects to be called with an object of type MultiplyParams.

Use the search field on my Home Page to filter through my more than 1,000 articles.