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.
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:

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:

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.
You may also like:
- Generic Arrow Functions in TypeScript
- Exclamation Mark in TypeScript
- How to Handle Catch Error Types in TypeScript?
- Create an Object from an Interface in TypeScript
- Declare and Use TypeScript Interfaces with Nested Arrays of Objects
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.