How to Convert a Set to an Array in TypeScript?

Recently, I got a requirement to convert a set to an array in TypeScript. I tried different methods. In this tutorial, I will explain how to convert a Set to an Array in TypeScript with some examples.

Table of Contents

Introduction to Sets and Arrays in TypeScript

In TypeScript, a Set is a collection of unique values, while an Array is an ordered list of elements. Sometimes, you may need to convert a Set to an Array to perform more suitable operations for arrays, such as indexing, sorting, or filtering.

Convert a Set to an Array in TypeScript

There are several ways to convert a Set to an Array in TypeScript. Let me show the three most common methods with some examples.

1. Using the Spread Operator

The spread operator (…) in TypeScript allows you to spread the elements of a Set into a new Array. Here’s an example:

const employeeSet: Set<string> = new Set(['John', 'Emma', 'Michael', 'Olivia']);
const employeeArray: string[] = [...employeeSet];
console.log(employeeArray); // Output: ['John', 'Emma', 'Michael', 'Olivia']

In this example, we have a Set called employeeSet containing employee names. By using the spread operator [...employeeSet], we create a new Array employeeArray with the elements from the Set.

Here is the exact output in the screenshot below:

Check out How to Use Array Reduce() Method in TypeScript?

2. Using Array.from()

The TypeScript Array.from() method creates a new Array instance from an iterable or array-like object, such as a Set. Here’s an example:

const stateSet: Set<string> = new Set(['California', 'New York', 'Texas', 'Florida']);
const stateArray: string[] = Array.from(stateSet);
console.log(stateArray); // Output: ['California', 'New York', 'Texas', 'Florida']

In this case, we have a Set stateSet containing US state names. By passing the Set to Array.from(stateSet), we create a new Array stateArray with the elements from the Set.

3. Using the forEach() Method

The forEach() method allows you to iterate over the elements of a Set and push them into an Array in TypeScript. Here’s an example:

const citySet: Set<string> = new Set(['New York City', 'Los Angeles', 'Chicago', 'Houston']);
const cityArray: string[] = [];
citySet.forEach(city => cityArray.push(city));
console.log(cityArray); // Output: ['New York City', 'Los Angeles', 'Chicago', 'Houston']

In this example, we have a Set citySet containing US city names. We create an empty Array cityArray and use the forEach() method to iterate over each element in the Set. Inside the callback function, we push each city into the cityArray.

Here is the exact output in the screenshot below:

Read How to Flatten an Array of Arrays in TypeScript?

Convert a Set to an Array in TypeScript Example

Let me show you a real example of converting a set to an array in TypeScript. Suppose you are working on a project for a US-based e-commerce company, and you need to process customer orders. Each order contains a Set of product IDs, but you need to perform some operations that require an Array.

Here is the TypeScript code you can write.

interface Order {
  orderId: number;
  customerName: string;
  productIds: Set<number>;
}

const order: Order = {
  orderId: 1001,
  customerName: 'Sarah Johnson',
  productIds: new Set([101, 205, 312, 407]),
};

const productArray: number[] = Array.from(order.productIds);
console.log(productArray); // Output: [101, 205, 312, 407]

In this example, we have an Order interface that represents a customer order. The productIds property is a Set of product IDs. To perform operations on the product IDs, we convert the Set to an Array using Array.from(order.productIds). Now, we can easily work with the productArray to process the order further.

How to Choose the Right Method

When deciding which method to use for converting a Set to an Array in TypeScript, consider the following:

If you prefer a concise and readable approach, the spread operator (…) is a good choice.
If you need to convert a Set to an Array in a more explicit and clear manner, Array.from() is a suitable option.
If you need to perform additional operations while converting the Set to an Array, the forEach() method allows you to customize the conversion process.

Ultimately, the choice depends on your specific requirements and coding style preferences.

Conclusion

In this tutorial, I explained how to convert a set to an array in Typescript using different methods. I explained three approaches: using the spread operator, Array.from(), and the forEach() method.