Typescript Function Taking One Or Array Of Objects

When working with TypeScript, understanding how to write a function that can accept either a single object or an array of objects is a valuable skill that can make your code more flexible and easier to work with. In this guide, we'll walk you through the process of creating a TypeScript function that can handle both scenarios seamlessly.

Firstly, let's define a common scenario where you might need a function that can take either a single object or an array of objects. Imagine you are working on a project where you need to process user data. Users can provide their information either individually or in bulk. By creating a function that accommodates both options, you can streamline your code and improve its reusability.

To start, let's create a TypeScript function called `processUserData` that can handle this scenario. Here's an example of how you can define this function:

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

function processUserData(data: UserData | UserData[]): void {
  if (Array.isArray(data)) {
    data.forEach((user) => {
      // Process each user in the array
      console.log(`Processing user: ${user.name}`);
    });
  } else {
    // Process the single user object
    console.log(`Processing user: ${data.name}`);
  }
}

In this code snippet, we first define an interface called `UserData` that represents the structure of the user object. The `processUserData` function takes a parameter named `data`, which can be either a single `UserData` object or an array of `UserData` objects.

To determine whether the `data` parameter is a single object or an array, we use TypeScript's `Array.isArray` function. If it's an array, we iterate over each user object using `forEach`. If it's a single object, we directly process that object.

Using this approach allows you to handle different input scenarios within the same function, making your code more adaptable to varying data structures.

When calling the `processUserData` function, you can pass a single user object or an array of user objects without having to create separate functions for each case. Here's how you can do that:

const user1: UserData = { name: 'Alice', age: 30, email: '[email protected]' };
const user2: UserData = { name: 'Bob', age: 35, email: '[email protected]' };

processUserData(user1);
processUserData([user1, user2]);

By following this approach, you can write cleaner and more efficient TypeScript code that can handle a variety of data structures with ease. This technique enhances the scalability and maintainability of your projects, saving you time and effort in the long run.

In conclusion, creating a TypeScript function that can accept either a single object or an array of objects is a powerful way to improve the flexibility and robustness of your codebase. With the right approach and understanding, you can write code that is more adaptable to different scenarios, ultimately making your development process smoother and more efficient.