Arrays

An array is a sequence of values.

Each value is called an element. Elements are enclosed in square brackets ([ and ]) and separated by commas (,).

The elements of an array are usually related in some way, like a list of numbers or group of strings. In TypeScript, the data type of an array can be expressed in multiple ways, as shown below:

You will notice that TypeScript automatically infers the type of [1, 2, 3] to be number[], which is equivalent to Array<number>.

TypeScript supports all standard JavaScript array methods, but adds type checking to make sure you're using them correctly.

Creating arrays

There are several equivalent ways to create an array.

If you pass a single number into new Array, you create an empty array of that size. If you pass more than one number into new Array, it creates a new array with those values. Effectively, the first argument might do something different depending on how many arguments are passed in.

Array.from is especially useful for converting a wide range of iterable objects into arrays. It also allows you to define a mapping function which is applied to each element of a source array.

Checking for an array

You can check if a value is an array with the Array.isArray function.

The fill function can fill each element of an empty array with the same value.

You can also pass an optional start and end index to fill to control which elements are assigned.

Adding to an array

The push method appends new items to the end of an array.

TypeScript will produce a compilation error if the new value does not match the array's element type.

Even though the program above is a valid JavaScript program that will successfully add "four" to the array, TypeScript enforces the element type unless you explicitly set the array's type to any[].

You can also use the push method to append any number of new values with a single instruction.

Array indexing and length

Each value in an array has a unique position, called an index.

Indexes start at 0 for the first element (this is called zero indexing). The length of an array can be accessed with the length property, which allows for a common programming pattern where a for loop is used to iterate over the elements of an array.

Notice that the index of the last element of an array is array.length - 1. For example, if we wanted to extend the program above to calculate any length of the Fibonacci sequence, we could use a while loop to keep appending new items.

Filtering arrays

The filter function produces a new array containing each element where the given testFunction returns a true value.

Mapping an array

The map method produces a new array by applying the given function to each element of an existing array.

Consider the following program which applies the result of a function to each element in an array using a for loop, and a more concise way to apply the function with map.

You can use an inline arrow function with map to quickly transform an array of values.

Concatenating arrays

The concat method creates a new array by joining two arrays.

Reducing an array

The array reduce function takes a reducing function and an accumulator.

Tuples

A tuple is an exact sequence of values.

When TypeScript infers that an array might contain multiple data types, it creates a type union of the various types. Defining a type as a tuple allows TypeScript to infer the type when you access specific elements of the tuple.

Notice that you will get a tuple error if the specified sequence is not matched exactly.

Spreading an array

The spread operator ... inserts the elements of an array into another array.

You can use the spread operator with push to append an array of elements to an existing array, without needing to continuously generate a new array as you would with concat.