How To Set Default Values In TypeScript Interfaces?

As a web developer, you should know how to set default values in TypeScript interfaces. TypeScript interfaces do not directly support default values; several techniques exist to achieve this. In this tutorial, I will explain how to use default values in TypeScript interfaces.

Table of Contents

TypeScript Interfaces

TypeScript interfaces allow you to define the shape of an object. They provide a way to name these types and enforce contracts within your code. Here’s a basic example of an interface in TypeScript:

interface User {
    firstName: string;
    lastName: string;
    age: number;
}

In this example, the User interface describes an object with firstName, lastName, and age properties, all of which are required.

Check out Differences Between Type and Interface in TypeScript

Set Default Values in TypeScript Interfaces

Although interfaces do not support default values directly, you can achieve this functionality in a couple of ways. Let me show you with some examples.

Using Optional Properties

One way to handle default values is by using optional properties in your interface and then setting defaults in your implementation. Here is the code:

interface User {
    firstName: string;
    lastName: string;
    age?: number; // Optional property
}

const createUser = (user: User): User => {
    return {
        firstName: user.firstName,
        lastName: user.lastName,
        age: user.age ?? 30 // Default age to 30 if not provided
    };
};

const userJohn = createUser({ firstName: "John", lastName: "Doe" });
console.log(userJohn); // Output: { firstName: "John", lastName: "Doe", age: 30 }

In this example, the age property is optional, and if it is not provided, it defaults to 30.

You can see the exact output in the screenshot below:

Set Default Values in TypeScript Interfaces

Read Add Functions to Interfaces in TypeScript

Using Default Parameters in Functions

You can also use default parameters in TypeScript functions to set default values for properties.

interface User {
    firstName: string;
    lastName: string;
    age?: number;
}

const createUser = ({ firstName, lastName, age = 30 }: User): User => {
    return {
        firstName,
        lastName,
        age
    };
};

const userJane = createUser({ firstName: "Jane", lastName: "Smith" });
console.log(userJane); // Output: { firstName: "Jane", lastName: "Smith", age: 30 }

In this example, the age parameter defaults to 30 if it is not provided.

Here is the exact output in the screenshot below:

How to Set Default Values in TypeScript Interfaces

Read TypeScript Generic Anonymous Functions

Using Classes with Default Values

Another approach to setting default values in TypeScript interfaces is to use classes that can have default values for their properties.

Here is an example.

interface User {
    firstName: string;
    lastName: string;
    age?: number;
}

class DefaultUser implements User {
    firstName: string;
    lastName: string;
    age: number;

    constructor(firstName: string, lastName: string, age: number = 30) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}

const userBob = new DefaultUser("Bob", "Johnson");
console.log(userBob); // Output: { firstName: "Bob", lastName: "Johnson", age: 30 }

In this example, the DefaultUser class sets a default value for the age property.

Conclusion

While TypeScript interfaces do not natively support default values, you can achieve similar functionality using optional properties, default parameters, or classes. In this tutorial, I explained how to set default values in TypeScript interfaces.