TypeScript arrays

TypeScript, a superset of JavaScript, adds static types to enhance code quality and readability. Arrays in TypeScript are a powerful data structure used to store collections of elements. This guide explores how to use arrays in TypeScript, including their initialization, manipulation, and iteration.

What is a TypeScript array?

An array in TypeScript is a list-like data structure that allows you to store multiple items under a single variable name while maintaining a sequenced structure. These items can be of any TypeScript type, such as numbers, strings, or objects.

Declaring and initializing arrays

To declare an array in TypeScript, you can use two syntaxes: the Array type or square brackets [].

Example:

let numbers: number[] = [1, 2, 3]
let strings: Array<number> = [1, 2, 3]

Both lines achieve the same effect but use different syntaxes. The square bracket syntax is more common and preferred for its simplicity.

TypeScript array of objects

You can also store objects in an array, specifying the structure of the objects within the array.

Example:

interface User {
  id: number
  name: string
}

let users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

This defines a User interface and creates an array of User objects.

Common operations on arrays

Adding items to an array

To add items, use the push method for appending elements to the end of an array.

Example:

let numbers: number[] = [1, 2, 3]
numbers.push(4) // numbers is now [1, 2, 3, 4]

Checking if an array contains an item

The includes method checks if an array contains a specific element.

Example:

let numbers: number[] = [1, 2, 3]
let hasTwo = numbers.includes(2) // returns true
let hasTwo = numbers.includes(4) // returns false

Mapping over an array

The map method transforms the elements in an array by applying a function to each element.

Example:

let numbers: number[] = [1, 2, 3, 4]
let squares = numbers.map((x) => x * x) // [1, 4, 9, 16]

Removing an item from an array

To remove an item, you can use the splice method, which allows you to remove elements at any index.

Example:

let numbers: number[] = [1, 2, 3, 4]
numbers.splice(2, 1) // Removes 1 element at index 2, numbers is now [1, 2, 4]

Sorting an array

The sort method sorts the elements of an array in place, mutating the array.

Example:

let numbers: number[] = [2, 1, 4, 3]
numbers.sort((a, b) => a - b) // numbers is now [1, 2, 3, 4];

Finding an element in an array

The find method returns the first element that satisfies the provided testing function.

Example:

let numbers: number[] = [1, 2, 3, 4]
let found = numbers.find((x) => x > 1) // returns 2

Filtering an array

The filter method creates a new array with all elements that pass the test implemented by the provided function.

Example:

let numbers: number[] = [1, 2, 3, 4]
let even = numbers.filter((x) => x % 2 === 0) // [2, 4]

Advanced array operations

Instantiating an array

You can instantiate an array using the new Array() syntax, which can be useful when you know the size beforehand but not the elements.

Example:

let zeroes = new Array(5).fill(0) // [0, 0, 0, 0, 0]

Iterating over an array

For looping over array elements, you can use the forEach method or a for loop.

Example with forEach:

let numbers: number[] = [1, 2, 3, 4]
numbers.forEach((number) => console.log(number)) // this will output each number in sequence

Checking the length of an array

To get the number of elements in an array, use the length property.

Example:

let numbers: number[] = [1, 2, 3, 4]
let length = numbers.length // returns 4

Creating an empty array

Sometimes you need to start with an empty array and conditionally add elements.

Example:

let emptyArray: number[] = []

For further reading see the official TypeScript documentation.