Using Default values with Interfaces in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 16, 2022

banner

Photo from Unsplash

Using Default values with Interfaces in TypeScript #

To set default values for an interface in TypeScript, create an initializer function, which defines the default values for the type and use the spread syntax (...) to override the defaults with user-provided values.

index.ts
interface Person { name: string; age: number; country: string; } function initPerson(options?: Partial<Person>): Person { const defaults = { name: '', age: 0, country: '', }; return { ...defaults, ...options, }; } const p1: Person = initPerson(); console.log(p1); // 👉️ {name: '', age: 0, country: ''} const p2: Person = initPerson({ name: 'Tom', age: 30 }); console.log(p2); // 👉️ {name: 'Tom', age: 30, country: ''}

We created an initPerson function, which can be called with an options object or no parameters at all.

The function defines the default values for the Person interface and uses the spread syntax (...) to unpack the defaults before unpacking any of the user provided values.

We used the Partial utility type to set all of the properties in the Person interface to optional in the function's parameter.

Any of the values the function is passed, will override the default values.

index.ts
const obj1 = { name: 'Tom', }; const obj2 = { name: 'Alfred', }; const obj3 = { ...obj1, ...obj2, }; console.log(obj3); // 👉️ {name: 'Alfred'}

When unpacking multiple objects with the same key, the object that gets unpacked the last overrides the previous values.

When using this approach, we can be sure that the object, the initPerson function creates will always conform to the Person interface, even if it gets called with no parameters.

It should be noted that you can't explicitly set default values in an interface, because interfaces and types get removed during compilation. They don't exist at runtime, so we can only leverage them during the development process.

If you want to set the properties of an interface to have a default value of undefined, you can simply make the properties optional.

index.ts
interface Person { name?: string; age?: number; country: string; } const p1: Person = { country: 'Germany', }; // 👇️ Rest are optional p1.age = 30; p1.name = 'Tom';

We used a question mark to mark the name and age properties as optional.

Now we are not required to set them when creating an object that uses the Person interface.

You are able to set the properties on the object using dot or bracket notation at a later stage.

Even though TypeScript does not require us to set the name and age properties when creating the object, it still checks that any properties added later on conform to the Person interface.

index.ts
interface Person { name?: string; age?: number; country: string; } const p1: Person = { country: 'Germany', }; // ⛔️ Error: Property 'test' does not exist on type 'Person' p1.test = 'hello'; // ⛔️ Error: Type '5' is not assignable to type 'string' or 'undefined' p1.name = 5;

We are only able to add properties that are defined on the interface and match the specified type.

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.