TypeScript has become a popular choice for building robust and scalable applications. One of its key features is the ability to provide type safety to JavaScript code. When working with arrays and tuples in TypeScript, understanding their types and how to leverage them effectively can greatly enhance your development experience.

In this article, we’ll explore the ins and outs of array and tuple types in TypeScript

Array types

Arrays are fundamental data structures in JavaScript, and TypeScript adds powerful type annotations to them. Let’s explore different scenarios and first, examine TypeScript’s type inference capabilities in relation to arrays.

Type inference

Type inference in TypeScript allows to automatically determine the types of variables and expressions based on the context and the assigned values.

Let’s see the example below.

const stars = ["Domhnall Gleeson", "Rachel McAdams", "Bill Nighy", "Lindsay Duncan"];

In this example, we initialised an array stars with strings. TypeScript automatically infers that the stars array has string values. When inspecting the stars variable, TypeScript recognise it as string[].

Type inference feature also acts as a safety net, catching incompatible value assignments at compile-time. For example, if we attempt to push a number into the stars array:

stars.push(100);

TypeScript detects the incompatible value, as the stars array is inferred as string[]. It raises a compilation error, highlighting the type mismatch and preventing the code from executing.

Specifying array element type for dynamic updates

While type inference works well when initialising arrays with values, there are scenarios where we need to update the array elements later.

For instance, when receiving data from a server, we typically start with an empty array and assign the data once it’s retrieved. In such cases, it becomes crucial to explicitly specify the data type to maintain consistency across the application.

We can explicitly specify the array’s element type during declaration. Let’s consider an example that demonstrates this approach.

let stars: string[] = [];
stars = ["Domhnall Gleeson", "Rachel McAdams", "Bill Nighy", "Lindsay Duncan"];

In this example, we first declare an empty array stars and explicitly define its element type as string[]. Later, we assign an array of strings to the stars variable. TypeScript ensures that only string values can be added or updated in the stars array.

If we attempt to assign a value of a different type, such as a number, TypeScript raises a type error, preventing the incompatible assignment and ensuring type consistency throughout the application.

Multiple types in array with Union operator

There are situations where an array needs to accommodate elements of different types. In TypeScript, we can achieve this by utilising the | (union) operator to allow multiple types within the array.

let movieDetails: (string | number | Date)[];

movieDetails = ["About Time", new Date("2013-10-17"), 7.8];

In the code snippet above, we declare the movieDetails array with a type annotation that permits string, number, and Date elements. This allows us to assign values of different types to the array, such as a movie title as a string, a release date as a Date object, and a rating as a number.

However, TypeScript provides static type checking, which means that if we attempt to add a value of a type that is not included in the union, an error will be displayed.

As shown in the example image, TypeScript flags an error when trying to assign a boolean value to the movieDetails array, as it violates the type annotation.

Handling Operations on Union Types

Let’s explore an example to understand how TypeScript handles operations on union types within arrays.

Consider the following code snippet:

let movieDetails: (string | number | Date)[];

movieDetails = ["About Time", new Date("2013-10-17"), 7.8];

for(const detail of movieDetails) {
  console.log(detail.toUpperCase());
}

Now when we attempt to iterate over the movieDetails array and apply the toUpperCase() method on each element, TypeScript raises an error.

The error message shown in the image highlights that the toUpperCase() method cannot be applied to number and Date types within the union.

To resolve this issue, we can use type guards or perform runtime checks to ensure that the operations are valid for each element.

let movieDetails: (string | number | Date)[];

movieDetails = ["About Time", new Date("2013-10-17"), 7.8];

for(const detail of movieDetails) {
  if (typeof detail === "string") {
    console.log(detail.toUpperCase());
  } else {
    console.log(detail);
  }
}

In the above updated code, we check the type of each element before applying the toUpperCase() method and we can avoid the error and ensure type safety.

Multidimensional array

A multidimensional array is an array of arrays, where each element can be accessed using multiple indices.

To declare a multidimensional array in TypeScript, we can use square brackets to represent each dimension. Here’s an example of a 2D array:

let movies: string[][] = [
  ["About Time", "Richard Curtis", "R"],
  ["The Hobbit: An Unexpected Journey", "Peter Jackson", "PG-13"],
  ["Parasite", "Bong Joon Ho", "R"]
];

If we try to add a value of a different type such as number to the multidimensional array, TypeScript will raise a type error, ensuring type safety.

To accommodate different value types within the multidimensional array, we can use the union operator as we saw above to specify that the elements can be either strings or numbers.

let movies: (string | number)[][] = [
  ["About Time", "Richard Curtis", "R", 7.8],
  ["The Hobbit: An Unexpected Journey", "Peter Jackson", "PG-13", 7.8],
  ["Parasite", "Bong Joon Ho", "R", 8.5]
];

Map

In TypeScript, the map method enables us to iterate through an array. It works quite similar to the one we mentioned in the “Handling Operations on Union Types” section above but let’s take a look at the example with the map function in this section in more detail.

Let’s take a look at the example:

let movies = ["About Time", "The Hobbit: An Unexpected Journey", "Parasite"];

movies.map((movie) => {
  return movie.toUpperCase();
});

In this example, we have an array movies that contains several movie titles. We utilise the map method to iterate over each element of the array and apply the toUpperCase function to convert each movie title to uppercase.

TypeScript infers that the movies array has the string values. Also, TypeScript can infer the resulting type based on the logic inside the callback function. In our example, the map method infers that the resulting array will contain uppercase strings, as the toUpperCase function returns a string.

At the moment, we don’t really need to type the map function and its returned value. However, to safeguard the type, let’s type them:

movies.map((movie: string): string => {
  return movie.toUpperCase();
});

So each movie received should be a string (the first string) and its returned value also should be a string (the second string).

Now let’s imagine that there is new movie title added to the movies array but it’s a number.

And Typescript automatically infers that the movies array contain either the string or number.

However, it will throw us an error from the map function.

To fix this issue, let’s allow number type.

movies.map((movie: string | number): string => {
  return movie.toUpperCase();
});

Now let’s fix the returned value type too as it shows this error now because toUpperCase() is not working for numbers.

As we saw from the “Handling Operations on Union Types” section above, we can check the type of the movie and if it’s string, we make it upper case using the toUpperCase function, otherwise we just return the value as is.

movies.map((movie: string | number): string => {
  if (typeof movie === "string") {
    return movie.toUpperCase();
  }
  return movie;
});

However, it will still throw us a type error because currently we typed only string for the returned value.

Let’s update that too.

movies.map((movie: string | number): (string | number) => {
  if (typeof movie === "string") {
    return movie.toUpperCase();
  }

  return movie;
});

Great, we typed the map function accepting both string and number values in the movies array.

Type aliases for arrays

TypeScript’s type aliases provide a way to create custom names for types, offering improved code readability and maintainability. When working with arrays, type aliases become particularly useful, allowing us to define complex array types and control them from a single location.

Let’s take a look at the example.

type Title = string[];

const movieTitles: Title = ["About Time", "The Hobbit: An Unexpected Journey", "Parasite"];

In this example, we define a type alias Title that represents an array of strings. We then declare the movieTitles variable, utilising the Title type alias to ensure the array only contains string elements.

One of the key advantages of type aliases is the ability to reuse them across multiple variables and expand their capabilities. Let’s see how we can leverage this flexibility.

type Title = string[];

const movieTitles: Title = ["About Time", "The Hobbit: An Unexpected Journey", "Parasite"];
const songTitles: Title = ["The Luckiest", "Bloom", "Golden Hour"];

In this updated example, we reuse the Title type alias for both movieTitles and songTitles arrays. This approach allows us to maintain consistency and ensures that both arrays follow the same type restrictions.

Furthermore, if we want to allow other types in the array, such as numbers, we can easily extend the type alias using a union:

type Title = (string | number)[];

const movieTitles: Title = ["About Time", "The Hobbit: An Unexpected Journey", "Parasite", 300];
const songTitles: Title = ["The Luckiest", "Bloom", "Golden Hour"];

By modifying the Title type alias to (string | number)[], we now allow both string and number elements in the arrays.

Tuples

What are tuples?

A tuplese are ordered collections of elements with different types, where the position of each element is fixed. Unlike arrays that typically contain elements of the same type, tuples offer the flexibility to combine diverse data types into a single structure. This makes tuples suitable for representing specific combinations of values in scenarios that require structured data representation.

Declaring and accessing Tuple elements

To understand how to declare and access tuple elements in TypeScript, let’s explore an example:

let movie: [string, string, number] = ["About Time", "Richard Curtis", 7.8];

In this example, we declare a tuple named movie that represents the title, director, and rating of a movie. The type of each element is explicitly specified using square brackets, indicating the order and data types within the tuple. In this case:

the first element is a string (title)
the second element is a string (director)
the third element is a number (raiting)

Unlike arrays, the order of elements in tuples is critical, and swapping the order is not allowed. By specifying the tuple type in the example, we inform TypeScript that there will be exactly three values in the exact order.

To access individual elements of a tuple, we use zero-based indexing:

console.log(movie[0]); // Output: "About Time"
console.log(movie[1]); // Output: "Richard Curtis"
console.log(movie[2]); // Output: 7.8

Maintaining the integrity of the tuple structure is important. If we attempt to update the rating value to a string, TypeScript will throw an error:

movie[2] = '7.8';

The error message ensures that we adhere to the defined tuple type and maintain the expected data integrity.

Push

As already mentioned, tuples impose restrictions on the number of elements they can contain. Attempting to add an additional element beyond the specified length of a tuple will result in an error.

Let’s examine the code below:

let movie: [string, string, number] = ["About Time", "Richard Curtis", 7.8];

movie[3] = '2013-10-17';

and the error message will indicate that accessing index 3 is not allowed within the tuple, as it exceeds the defined structure.

Interestingly, despite the restrictions on direct assignment, we can still leverage the push method to add elements to a tuple.

Consider the modified code snippet below:

let movie: [string, string, number] = ["About Time", "Richard Curtis", 7.8];

// movie[3] = '2013-10-17';
movie.push('2013-10-17');

In this example, we use the push method to add the release date ‘2013-10-17’ (in string format for testing) to the tuple. Surprisingly, this operation does not produce an error.

The reason behind this behaviour is that tuples are internally treated as arrays. Consequently, destructive array methods like push, pop, shift, and unshift can be applied to tuples.

Type aliases for tuples

We can use type aliases for tuples to create reusable tuple structures that improve code organisation and reduce redundancy. Let’s see an example below.

type Movie = [string, string, number];

let movieOne: Movie = ["About Time", "Richard Curtis", 7.8];
let movieTwo: Movie = ["Parasite", "Bong Joon Ho", 8.5];

Instead of repeating the tuple definition every time, we can use a type alias to create a reusable template.

Variadic Tuple Types for merging tuples

Variadic tuple types were introduced in TypeScript 4.0 and it allows us to merge multiple tuples. With the use of the … rest elements, we can now merge tuples at any position within the tuple, whereas in older versions, it was only possible at the end.

Let’s take a look at the code.

const movieTitles = ["About Time", "The Hobbit: An Unexpected Journey"];
const movieRatings = [7.8, 8.1];

const mergedMovies = [...movieTitles, ...movieRatings];

// Output: ["About Time", "The Hobbit: An Unexpected Journey", 7.8, 8.1]
console.log(mergedMovies);

In this code, we have two separate tuples: movieTitles containing movie titles and movieRatings containing corresponding ratings. By using the spread operator ..., we can merge these tuples into a single array called mergedMovies.

And when we inspect the type of mergedMovies,

const mergedMovies: (string | number)[]

the type of mergedMovies is inferred as (string | number)[], indicating that it can hold elements of either string or number types.

Labelled tuples

TypeScript 4.0 introduced the labelled tuples which allow us to assign labels to tuple indices. Let’s compare an example without labels to one with labels:

Without Labels:

type movieInfo = [number, number, number, number, number, number]

const movie:movieInfo = [300, 7.6, 1, 2006, 19, 57];

In the above code, we have a movieInfo tuple, but without labels, it becomes challenging to understand the meaning of each element.

With Labels:

type movieInfo = [title: number, raiting: number, season: number, released: number, awardsWins: number, awardsNominations: number]

const movieInfo:movieInfo = [300, 7.6, 1, 2006, 19, 57];

By adding labels to the tuple indices, we can now clearly identify the purpose of each element.

Conclusion

In conclusion, arrays and tuples in TypeScript provide flexible and type-safe data structures. They enable us to store and manipulate collections of elements with different capabilities. By leveraging TypeScript’s features and type system, we can write clean and maintainable code, reducing bugs and improving productivity.