Live streamJoin us for "State of code review 2024" on July 18thRegister today

TypeScript arrays

Kenny DuMez
Kenny DuMez
Graphite software engineer

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.

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.

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

Example:

Terminal
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.

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

Example:

Terminal
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.

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

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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

Example:

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

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:

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

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

Example with forEach:

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

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

Example:

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

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

Example:

Terminal
let emptyArray: number[] = []

For further reading see the official TypeScript documentation.

Stay unblocked. Ship faster.
Experience the new developer workflow - create, review, and merge code continuously. Get started with one command.
Get started

Give your PR workflow
an upgrade today

Stack easier | Ship smaller | Review quicker

Or install our CLI.
Product Screenshot 1
Product Screenshot 2