How To Convert A Set To An Array In TypeScript

Convert a Set to an Array in TypeScript

Similar to JavaScript, Set and Array are two types of collections in TypeScript, which have the main difference that an Array can contain duplicate elements and a Set is not. Sometimes, you may want to convert a Set to an Array in TypeScript. Let’s find out some ways to do it here.

Convert A Set To An Array In TypeScript

Using Array.from() method

Array.from() is a static method that returns an Array from any array-like, iterable object.

Example code:

let s = new Set(["apple", "banana", "orange"]);
console.log("Array.isArray(s) =", Array.isArray(s));
let a = Array.from(s);
console.log("Array.isArray(a) =", Array.isArray(a));


Array.isArray(s) = false
Set(3) { 'apple', 'banana', 'orange' }
Array.isArray(a) = true
[ 'apple', 'banana', 'orange' ]

In the example above, I create a new Set with the Set constructor. As you can see, when I use console.log(s), the result shows that s is a Set with all of its elements between curly brackets. After that, a new Array is created from s with the Array.from() method. The elements of an array are contained in square brackets.

Iterating the Set and pushing its element to a new array

As I said at the beginning of this post, the main difference between a Set and an Array is that a Set does not contain duplicate elements. Another important difference is that you cannot access an element of a Set with an index as you can do it with an array.

To convert a Set to an Array in TypeScript by iterating over the elements of the Set and pushing them to a new array, you can use the forEach() method like this example code.

Example code:

let s = new Set([0, 1, 2]);
let a = [];
s.forEach(e => a.push(e));


[ 0, 1, 2 ]

Using spread operator

Another convenient way to convert a Set to an Array is to use the spread operator with three dots “…” syntax. 

Example code:

let s = new Set(['a', 'b', 'c']);
let a = [...s];


[ 'a', 'b', 'c' ]

It is so convenient, but the spread operator with a Set is not recommended in TypeScript. You may get an error when compiling your code like “Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.”. To fix this error, you need to add a “compilerOptions” config to your tsconfig.json file to show that you want to set the “downlevelIteration” to true, or the “target” of your code is “ES2015” or higher. 

    "compilerOptions": {
        "target": "ES2015",
        "downlevelIteration": true


In this tutorial, I showed you three ways to convert a Set to an Array in TypeScript. You can use the Array.from() method or iterating the Set and pushing its elements to a new array. You can also use the spread operator for your purpose, but notice to add the necessary config to your tsconfig.json file. Choose the best way suitable for your project, and I hope to see you next time.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *