How to create an array of multiple types in Typescript

The array is a type that stores multiple elements under one name. Usually. Array stores the data of a single type. Datatype is a Primitive type such as a number, string, or boolean or object such as classes or interfaces.

Let’s declare an array.

Arrays define using Generic Array Type syntax or square bracket syntax.

For example, an Array of numbers declares and initialized with a data type number.

// square bracket syntax.
let numbers: number[] = [1, 2, 3, 4, 5];
//Array Type
let numbers1: Array<number> = [1, 2, 3, 4, 5];

In the same way, String is also declared and initialized as seen below

// square bracket syntax.
let words: string[] = ["one", "two", "three", "four"];
//Array Type
let words1: Array<string> = ["one", "two", "three", "four"];

Take a look at the two samples above.

It defines an array that can only store one data type, such as strings or numbers.

How to declare an array with multiple types?

In Typescript,

You can combine multiple types using union type. Union type allows combining the existing types and data stores from one of the union types.

Union type of number and string represents using pipe(|) symbol as (number|string)

// square bracket syntax.
let words: (number | string)[] = ["one", 1, "two", "three", "four"];
//Array Type
let words1: Array<number | string> = ["one", 1, "two", 2, "three", "four"];

The above example declared an array of union types of numbers and strings. It stores either number or string data only and does not allow the storage of any other type.

Array Union type declare with Array type or square bracket syntax.

Another way using type alias syntax.

Type keyword allows for creating a new type from existing types.

Let’s create a new type using the type keyword

type MyArrayType = number | string;

MyArrayType is a new data type and union of number and string types. It accepts numeric and strings data only.

Create an array as follows

let words2: MyArrayType[] = ["one", 1, "two", "three", "four"];
let words3: Array<MyArrayType> = ["one", 1, "two", "three", "four"];

How to declare an array of objects of different types in TypeScript?

We can also create an array of mixed types such as objects and interfaces.

Let’s declare an Employee and User objects.

class Employee {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
  printEmployeeInfo(): void {
    console.log("Id = " + this.id + ", name = " + this.name);
  }
}

User.ts:

interface User {
  id: number;
  name: string;
  active: boolean;
}

Let’s declare an array of multiple types with class and interface.

Declared an array with the union of Employee class and interface user.

let all: Array<Employee | User> = []; // Array type
let all1: (Employee | User)[] = []; // Using Typeguard generics

Conclusion

To Sum up, Learn to define an array of a single type or multiple types.

Array with multiple types defined with Union type or type aliases.