How to create and ma­nip­u­late TypeScript arrays

Static typing makes it possible for the TypeScript compiler to monitor the data type of array elements. This feature helps TypeScript arrays to reduce the like­li­hood of errors in your code, allowing you to develop safer and more reliable ap­plic­a­tions.

What are TypeScript arrays?

In TypeScript, arrays are ordered lists of values. Just like in JavaS­cript, you can use arrays in TypeScript to store a col­lec­tion of elements. Elements can belong to different data types, including numbers, strings, objects or other arrays. TypeScript has the advantage of sup­port­ing static typing, which means that you can specify the data type of the elements in an array. This, in turn, improves error detection during de­vel­op­ment.

A key feature of arrays is their dynamic size, which allows you to add or remove elements without having to determine the size in advance. In TypeScript, arrays are mutable by default. However, you can create immutable arrays by using array methods such as map and filter. Immutable arrays can be used to create new arrays based on existing arrays. Arrays provide a con­sist­ent structure for or­gan­ising data and make it easier to filter, sort and iterate over elements.

In addition, TypeScript arrays can provide a basis for im­ple­ment­ing data struc­tures such as stacks (LIFO - Last-In-First-Out) and queues (FIFO - First-In-First-Out). They are also suitable for rep­res­ent­ing lists, tables and col­lec­tions in a variety of ap­plic­a­tions. Because elements belonging to the same type can be easily managed, arrays are par­tic­u­larly useful when pro­cessing data from external sources, be it APIs or databases.

What is the syntax for TypeScript arrays?

In TypeScript, arrays are declared with the keywords let, const or var followed by a variable name and a data type spe­cific­a­tion. When you declare a data type, you specify which data type the elements in the array should have. This is done using a colon. The elements are placed in square brackets and separated by commas in an array ini­tial­iser block.

The general syntax for declaring a TypeScript array is as follows:

const variableName: datatype[] = [element1, element2, ...];

• vari­able­Name is the name you choose for the array.
• datatype specifies the data type of the elements in the array.
• [element1, element2, …] are the actual elements or values that are to be stored in the array. These elements should have the data type that has been specified for the array.

Here are a few examples that help to il­lus­trate the syntax:

// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];

What TypeScript array methods are there?

TypeScript array methods are extremely useful and powerful because they allow you to ef­fi­ciently process, transform and organise data into arrays. The following table gives you an overview of common array methods in TypeScript and how they can be used.

TypeScript array examples

TypeScript arrays are in­dis­pens­able tools when it comes to or­gan­ising and pro­cessing data in ap­plic­a­tions. We’ll take a look at some of the key op­er­a­tions below.

Accessing array elements

Accessing array elements in TypeScript is a basic operation that allows you to retrieve specific elements within an array. You can access array elements using their index, which rep­res­ents their position in the array. In TypeScript, array indexes are zero-based. This means that the first element has index 0 and the second element has index 1.

let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99

De­struc­tur­ing arrays

With array de­struc­tur­ing, you can quickly and easily extract values from an array and assign them to a variable.

let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3

Iterating over elements in TypeScript arrays

Here is an example of how to iterate over an array in TypeScript using a for loop:

let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

In this example, we have the numbers array, which contains numbers. We use a for loop to iterate through the array. The loop starts at i = 0, and we increment i in each loop pass. With numbers[i] we are able to access the re­spect­ive element of the array and output it.

This is the output:

1
2
3
4
5

b063a9a0bb050c0cbf3a12ca06492bdb

367d32e6e3dca06fe225f3fb0920ab8d

7023faba66ebf53c94fb07a51ede46c2

787c9893abf7d98e9aa25d17a1eebedd

d0d26c3ffdc8a6e7d535e0ef5eb410d2