How to Set Default Values in TypeScript Interfaces?

One of my team members recently asked me how to set default values in TypeScript interfaces. While interfaces themselves do not support default values directly, there are practical workarounds to achieve similar functionality. In this tutorial, I will explain how to use TypeScript interfaces with default values.

Table of Contents

What Are TypeScript Interfaces?

TypeScript interfaces define the structure of an object, specifying the types of its properties. They are used to ensure that objects adhere to a specific shape, making your code more predictable and easier to debug.

interface User {
  name: string;
  age: number;
  email: string;
}

In the example above, the User interface specifies that a user object must have name, age, and email properties, all of which are required.

Check out Create an Object from an Interface in TypeScript

Set Default Values in TypeScript Interfaces

While TypeScript interfaces do not support default values natively, you can achieve default values by combining interfaces with functions or classes. This approach allows you to provide default values when creating objects that conform to the interface.

1. Using Functions to Set Default Values

One common method to set default values is by using functions that return objects conforming to the interface in TypeScript. Here’s an example:

interface User {
  name: string;
  age: number;
  email: string;
  city?: string; // Optional property
}

function createUser(user: Partial<User>): User {
  return {
    name: user.name || 'John Doe',
    age: user.age || 30,
    email: user.email || 'john.doe@example.com',
    city: user.city || 'New York',
  };
}

const newUser = createUser({ name: 'Alice' });
console.log(newUser);
// Output: { name: 'Alice', age: 30, email: 'john.doe@example.com', city: 'New York' }

In this example, the createUser function takes a Partial<User> object, which means all properties are optional. It then merges the provided values with the default values.

Here is the exact output in the screenshot below:

Set Default Values in TypeScript Interfaces

Read How to Check if a String is Empty in TypeScript?

2. Using Classes to Set Default Values

Another approach to setting default values for TypeScript interfaces is to use classes, which can have default values for properties. Here’s how you can do it:

interface User {
  name: string;
  age: number;
  email: string;
  city?: string;
}

class UserClass implements User {
  name: string;
  age: number;
  email: string;
  city: string;

  constructor(user: Partial<User> = {}) {
    this.name = user.name || 'John Doe';
    this.age = user.age || 30;
    this.email = user.email || 'john.doe@example.com';
    this.city = user.city || 'New York';
  }
}

const newUser = new UserClass({ name: 'Alice' });
console.log(newUser);
// Output: UserClass { name: 'Alice', age: 30, email: 'john.doe@example.com', city: 'New York' }

In this example, the UserClass constructor initializes the properties with default values if they are not provided.

Read How to Check if a String Contains a Substring in TypeScript?

Document Default Values in TypeScript

While TypeScript does not support default values in interfaces directly, you can document the default values in comments or documentation tools to make it clear to other developers.

/**
 * User interface
 * @property {string} name - The name of the user.
 * @property {number} age - The age of the user. Default is 30.
 * @property {string} email - The email of the user. Default is john.doe@example.com.
 * @property {string} [city] - The city of the user. Default is New York.
 */
interface User {
  name: string;
  age: number;
  email: string;
  city?: string;
}

By documenting the default values, you provide valuable information to other developers who use your code.

Conclusion

While TypeScript interfaces do not support default values directly, you can achieve similar functionality using functions or classes. These methods allow you to define default values and ensure that your objects conform to the specified structure. In this tutorial, I explained how to set default values in TypeScript interfaces with some examples.