How To Define An Array With Multiple Types In TypeScript

While working with arrays, there are many times that we have to define an array with multiple types in TypeScript. If you are still struggling and don’t know how to do it, please check out our instructions for some of the most common ways. 

Define an array with multiple types in TypeScript

Using union type 

One of the straightforward methods is to use the union type. In TypeScript, a variable can have different/mixed types, and they are called union. For example: 

var result : number | string;

result = 1;
console.log(typeof result);

result = 'LearnShareIT.com';
console.log(typeof result);

Output:

number
string

As you can see, our variable result can be assigned both a number value and a string value. Now we will try to define our array with multiple types using the union types method.

var myArr: (string | number | boolean)[] = ["LearnShareIT.com", 43, true];

for (let i = 0; i < myArr.length; i++) {
    console.log(myArr[i]);
}

Output: 

LearnShareIT.com
43
true

Using tuple

Another way to handle this issue is to use the tuple. The tuple is basically the array but with a known length and type for each element. This is exactly what we need since we can set the type for each of our elements separately. 

Syntax: 

var tuple : [type1, type2, type3,...] = [value1, value2, value3,...]

Parameters: 

• type 1, type2, type3,…: the type for each element of the tuple.
• value1, value2, value3,…: the corresponding value of each element. 

Now, let’s try to apply it to an example to define an array with multiple types in TypeScript. 

var myArr: [string | number | boolean];
myArr = ["LearnShareIT.com", 43, true];

for (let i = 0; i < myArr.length; i++) {
    console.log(myArr[i]);
}

Output: 

LearnShareIT.com
43
true

Another feature of the tuple is that if we set the value in the wrong other, it will draw an error:

var myArr: [string | number | boolean];
myArr = [43, "LearnShareIT.com", true];

for (let i = 0; i < myArr.length; i++) {
    console.log(myArr[i]);
}

Output:

Type '[number, string, true]' is not assignable to type '[string | number | boolean]'.
  Source has 3 element(s) but target allows only 1.

Summary

In this tutorial, we have shown you two different ways to define an array with multiple types in TypeScript. This is an important skill that every TypeScript programmer should know. The idea is very straightforward: using the union type or the tuple.

Maybe you are interested:

• How to sum a property in an Array of Objects in Typescript
• How to get the sum of an Array of Numbers in Typescript
• Declare an Empty Array for a typed Variable in TypeScript

Khanh Ngo

Hello. My name is Khanh Hai Ngo. I graduated in Information Technology at VinUni. My advanced programming languages include C, C++, Python, Java, JavaScript, TypeScript, and R, which I would like to share with you. You will benefit from my content.

---

Name of the university: VinUni
Major: EE
Programming Languages: C, C++, Python, Java, JavaScript, TypeScript, R