How to create an array of multiple types in Typescript

The array is a data structure that allows you to store multiple elements under a single name. Typically, an Array contains elements of a single data type. The data type can be a primitive type such as a number, string, or boolean, or an object like classes or interfaces.

Let’s declare an array.

Arrays can be defined using either the Generic Array Type syntax or the square bracket syntax.

For example, here’s how you declare and initialize an array of numbers.

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

Similarly, you can declare and initialize an array of strings.

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

In both examples above, we define arrays that can only store elements of a single data type, such as strings or numbers.

#How to Declare an Array with Multiple Types in TypeScript

In TypeScript, you can declare arrays with multiple types by using a union type. This allows you to combine existing types and specify that the array can store data of any of the union types.

To represent a union type of number and string, you use the pipe symbol (|) as follows: (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 declares an array of union types comprising numbers and strings. It will only accept data of type number or string and will not allow any other type.

You can declare the array union type using either the Array type or square bracket syntax.

Another approach is to use the type alias syntax, which allows you to create a new type from existing types.

Let’s create a new type named MyArrayType using the type keyword:

type MyArrayType = number | string;

MyArrayType is a new data type that represents a union of number and string types, accepting only numeric and string data.

You can then create arrays using this new type.

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 create an array of mixed types, such as objects and interfaces.

Let’s declare an Employee and User object.

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;
}

Now, let’s declare an array with multiple types, including a class and an interface.

We declare an array with a union of Employee class and User interface.

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

#Conclusion

To sum up, we’ve learned how to define an array of a single type or multiple types.

Arrays with multiple types are defined using union types or type aliases.