How to create an array of multiple types in Typescript
- Admin
- Nov 29, 2023
- Typescript Angular
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.