When working with TypeScript applications, especially in real-world scenarios like dynamic forms or conditional configurations, there are times when you need to build objects based on user input or business logic. For example, I encountered this while developing a property management app for a client, where not every listing had a garage, pool, or parking space.
In this tutorial, I’ll show you how to conditionally add properties to objects in TypeScript using various techniques like conditional checks, the spread operator, and utility types like Partial.
Why Conditionally Add Properties in TypeScript?
When developing applications, there are many scenarios where you need to construct objects dynamically. For instance, you might be working on a user profile form where only certain fields are filled based on user input. Instead of initializing an object with all possible properties, you can add properties conditionally to keep your object lean and efficient.
Real-World Scenario
Imagine you are developing an application for a real estate company in New York. The application collects various details about properties, but not all details are always available. For example, some properties might have a parking space, while others do not. You want to add the parkingSpace property to the property object only if the information is available.
Check out: Check if an Object is Empty in TypeScript
Basic Example
Let’s start with a simple example. Suppose you are collecting user information for a social media application. The user can optionally provide their middle name. Here’s how you can conditionally add the middleName property to the user object.
interface User {
firstName: string;
lastName: string;
middleName?: string;
}
function createUser(firstName: string, lastName: string, middleName?: string): User {
const user: User = { firstName, lastName };
if (middleName) {
user.middleName = middleName;
}
return user;
}
const user1 = createUser("John", "Doe", "Michael");
const user2 = createUser("Jane", "Smith");
console.log(user1); // { firstName: "John", lastName: "Doe", middleName: "Michael" }
console.log(user2); // { firstName: "Jane", lastName: "Smith" }Output:
In this example, the middleName property is added to the user object only if it is provided.
Check out: Mapped Types in TypeScript
Add Property to Object Using the Spread Operator
The spread operator (…) is a powerful feature in JavaScript and TypeScript that allows you to spread the properties of an object into another object. This can be particularly useful for conditionally adding properties.
function createUserWithSpread(firstName: string, lastName: string, middleName?: string): User {
const user: User = {
firstName,
lastName,
...(middleName && { middleName })
};
return user;
}
const user3 = createUserWithSpread("Alice", "Johnson", "Marie");
const user4 = createUserWithSpread("Bob", "Brown");
console.log(user3); // { firstName: "Alice", lastName: "Johnson", middleName: "Marie" }
console.log(user4); // { firstName: "Bob", lastName: "Brown" }In this example, the spread operator is used to conditionally add the middleName property. If middleName is undefined or null, the spread operator does not add the property to the user object.
Check out: Update an Object in an Array in TypeScript
Add Property to Object Using Utility Types in TypeScript
TypeScript provides several utility types that can help you manage object properties. The Partial type, for instance, can be used to make all properties of a type optional.
interface Property {
address: string;
city: string;
state: string;
parkingSpace?: boolean;
}
function createProperty(address: string, city: string, state: string, parkingSpace?: boolean): Property {
const property: Partial<Property> = { address, city, state };
if (parkingSpace !== undefined) {
property.parkingSpace = parkingSpace;
}
return property as Property;
}
const property1 = createProperty("123 Main St", "Los Angeles", "CA", true);
const property2 = createProperty("456 Elm St", "San Francisco", "CA");
console.log(property1); // { address: "123 Main St", city: "Los Angeles", state: "CA", parkingSpace: true }
console.log(property2); // { address: "456 Elm St", city: "San Francisco", state: "CA" }Output:
In this example, the Partial type is used to create a property object with optional properties. The parkingSpace property is added only if it is provided.
Check out: Check if an Object is a String in TypeScript
Advanced Example: Building a Dynamic Form
Let’s consider a more advanced example where we are building a dynamic form for a real estate application. The form collects various details about properties, and some fields are optional based on the type of property.
interface PropertyForm {
address: string;
city: string;
state: string;
zipCode: string;
bedrooms?: number;
bathrooms?: number;
hasGarage?: boolean;
hasPool?: boolean;
}
function createPropertyForm(data: {
address: string;
city: string;
state: string;
zipCode: string;
bedrooms?: number;
bathrooms?: number;
hasGarage?: boolean;
hasPool?: boolean;
}): PropertyForm {
const { address, city, state, zipCode, bedrooms, bathrooms, hasGarage, hasPool } = data;
const propertyForm: PropertyForm = { address, city, state, zipCode };
if (bedrooms !== undefined) {
propertyForm.bedrooms = bedrooms;
}
if (bathrooms !== undefined) {
propertyForm.bathrooms = bathrooms;
}
if (hasGarage !== undefined) {
propertyForm.hasGarage = hasGarage;
}
if (hasPool !== undefined) {
propertyForm.hasPool = hasPool;
}
return propertyForm;
}
const form1 = createPropertyForm({
address: "789 Pine St",
city: "Seattle",
state: "WA",
zipCode: "98101",
bedrooms: 3,
bathrooms: 2,
hasGarage: true
});
const form2 = createPropertyForm({
address: "101 Maple St",
city: "Chicago",
state: "IL",
zipCode: "60601",
hasPool: true
});
console.log(form1); // { address: "789 Pine St", city: "Seattle", state: "WA", zipCode: "98101", bedrooms: 3, bathrooms: 2, hasGarage: true }
console.log(form2); // { address: "101 Maple St", city: "Chicago", state: "IL", zipCode: "60601", hasPool: true }Output:
In this example, we created a createPropertyForm function that takes an object with optional properties. The function conditionally adds these properties to the propertyForm object if they are provided.
Check out: Check If Object Is Undefined in TypeScript
Conclusion
In this tutorial, we explored multiple ways to conditionally add properties to objects in TypeScript, including direct conditional checks, the spread operator, and the Partial utility type. These techniques are especially useful when handling dynamic data, such as building forms for real estate listings or user profiles.
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
