Set default value for an Object parameter in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 26, 2022

banner

Photo from Unsplash

Set default value for an Object parameter in TypeScript #

To set default value for an object parameter:

  1. Type the object as having one or more optional properties.
  2. Set default value for each of the optional properties.
  3. Alternatively, set the entire object as optional, by setting all its properties to optional.
index.ts
// ✅ Set default values for parameters function getPerson( { name = 'Tom', age }: { name?: string; age: number } ) { console.log(name); console.log(age); } getPerson({ age: 30 }); // 👉️ Tom, 30 // ✅ Make object optional WITH defaults function getPerson2( { name, age }: { name: string; age: number } = { name: 'Tom', age: 30 }, ) { console.log(name); console.log(age); } getPerson2(); // 👉️ Tom, 30 // ✅ Make object optional WITHOUT defaults function getPerson4( { name, age }: { name?: string; age?: number } = {} ) { console.log(name); console.log(age); } getPerson4(); // 👉️ undefined, undefined // ✅ Setting default values inside function body function getPerson3(obj: { name?: string; age: number }) { const { name = 'Tom', age } = obj; console.log(name); console.log(age); }

The first example shows how to set default values for optional properties in an object parameter.

The getPerson function takes an object as a parameter, and the object has an optional property name.

index.ts
function getPerson( { name = 'Tom', age }: { name?: string; age: number } ) { console.log(name); console.log(age); } getPerson({ age: 30 }); // 👉️ Tom, 30

If the name property is not provided in the object when invoking the getPerson function, we default it to Tom.

Note that it's very important to use the question mark to set the name property as optional.

If the property is not set as optional, TypeScript will expect you to pass it every time you invoke the function.

Look at the following example:

index.ts
function getPerson( { name = 'Tom', age }: { name: string; age: number } ) { console.log(name); console.log(age); } // ⛔️ Error: Property 'name' is missing in // type '{ age: number; }' but required // in type '{ name: string; age: number; }'. getPerson({ age: 30 });

Even though we set a default value for the name property in the function's signature, TypeScript still expects that we provide the name property when calling the function, because we didn't mark it as optional.

The second and third examples show how to set the entire object parameter as optional when invoking the function.

index.ts
// ✅ Make object optional WITH defaults function getPerson2( { name, age }: { name: string; age: number } = { name: 'Tom', age: 30 }, ) { console.log(name); console.log(age); } getPerson2();
We provided a default value for the entire object, which means that the function can be invoked without provided an object at all.

This is different than setting a default value for each individual property, because you would still have to provide an empty object when calling the function.

index.ts
function getPerson( { name = 'Tom', age = 30 }: { name?: string; age?: number } ) { console.log(name); console.log(age); } // ⛔️ Error: Expected 1 arguments, but got 0.ts(2554) getPerson(); // ✅ OK getPerson({});
Even though all properties on the object parameter are optional and we've set default values, we still need to pass an empty object when calling the function.

If you want to make the entire object optional without setting any default values, make sure to set all of the object's properties to optional.

index.ts
// ✅ Make object optional WITHOUT defaults function getPerson4( { name, age }: { name?: string; age?: number } = {} ) { console.log(name); console.log(age); } getPerson4(); // 👉️ undefined, undefined

Notice that the name and age properties are set to optional and we've provided a default value for the entire object.

If your function declaration looks too busy, you can extract the parameters into a type or destructure them inside of the function's body.

index.ts
// ✅ Setting default values inside function body function getPerson3(obj: { name?: string; age: number }) { const { name = 'Tom', age } = obj; console.log(name); console.log(age); } getPerson3({ age: 30 }); // 👉️ Tom, 30

Which approach you pick is a matter of personal preference.

You can either set default values for a property when destructuring in the function's parameter list or in the function's body.

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.