What is Array Type in TypeScript and How it Can be Used?

A data structure that keeps a group of elements of the same type in an adjacent block of memory is known as an “array”. Arrays are also supported as a data type in TypeScript, as it is a superset of JavaScript. It is more type-safe than JavaScript because it allows the developers to specify the type of elements that an array can store. Arrays can be utilized in this way to produce a maintainable code.

This tutorial will demonstrate the array type in TypeScript and the way to use it.

What is Array Type in TypeScript and How it Can be Used?

“Array” is a data structure in TypeScript similar to JavaScript with an advanced feature of specifying array type. It can be used for storing and manipulating a collection of data, such as a list of numbers or strings, and can be accessed using their index. There are two ways to declare or use an array in TypeScript:

“Array” keyword
square brackets “[]” or shorthand syntax

Syntax for Single-Type Array

To declare or initialize an array with a single type, use the given syntax with the “Array” keyword:

Array<type> = [element1, element2, element3];

Or use it as a shorthand syntax as given below:

type[] = [element1, element2, element3];

Syntax for Multi-Type Array

With the help of the “Array” keyword, utilize the below syntax for initializing or declaring a multi-typed array:

Array<type | type> = [element1, element2, element3];

Or you can use the square brackets “[]” or shorthand syntax as follows:

(type | type)[] = [element1, element2, element3];

Example 1: Single String Type Array

We will first create a TypeScript file named “Arraytypes.ts”. In the given example, first, declare an array of string type named “color” using the “Array” keyword:

var color: Array<string>;

Now, initialize the array with string type values:

color = ['red', 'blue', 'green', 'black', 'white', 'purple', 'pink'];

Next, print the array on the console:

console.log(color);

After adding code, we will transpile this file to the JavaScript file using the given command:

tsc Arraytypes.ts

Then, for executing the JavaScript code, we will use the below-given command:

node Arraytypes.js

Note: It is mandatory to transpile the TypeScript file after every modification in it.

Output

To access array elements, use the square brackets notation “[ ]”. Here, we will access the element at index 3:

console.log(color[3]);

The output displays “black” which is the element of an array located at index 3:

Example 2: Single Number Type Array

In this example, create an array of even numbers by specifying its type “Number” using the shorthand syntax:

var evenNumbers: Number[] = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];

Print the array on the console:

console.log(evenNumbers);

Output

Example 3: Multi-Type Array

In the provided example, create an array that contains the values of string type as well as a number type.

First, declare an array using the shorthand syntax by specifying array types with the pipeline or union operator:

var array: (string | number)[];

Assign values to the array and then print it on the console:

array = ['red', 1, 'blue', 7, 'purple', 5];
console.log(array);

Output

That’s all about the usage of Array Type in TypeScript.

Conclusion

“Array” is a data structure in TypeScript similar to JavaScript that can be used for storing and manipulating a collection of data. To declare/use the array in TypeScript, there are two ways including the “Array” keyword or the square brackets “[ ]” or shorthand syntax. This tutorial demonstrated the array type in TypeScript and the way how to use it.

What is Array Type in TypeScript and How it Can be Used?