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));
console.log(s);
let a = Array.from(s);
console.log("Array.isArray(a) =", Array.isArray(a));
console.log(a);Output:
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));
console.log(a);Output:
[ 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];
console.log(a);Output:
[ '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
}
}Summary
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:
- Check if an Array contains a Value in TypeScript
- Convert an Enum to an Array of Objects in TypeScript
- Declare an Array of Booleans in TypeScript
Hello, I’m Joseph Stanley. My major is IT and I want to share programming languages to you. If you have difficulty with JavaScript, TypeScript, C#, Python, C, C++, Java, let’s follow my articles. They are helpful for you.
Job: Developer
Name of the university: HUST
Major: IT
Programming Languages: JavaScript, TypeScript, C#, Python, C, C++, Java