Skip to main content
eLearner.app
Module 1 · Lesson 2 of 22/14 in the course~10 min
Module lessons (2/2)

Arrays and Tuples

In JavaScript, arrays can contain any type of elements and can grow or shrink dynamically. TypeScript adds static type checking to ensure collections remain homogeneous or respect a fixed type structure.

Arrays (Homogeneous Collections)

In TypeScript, there are two equivalent ways to define the type of an array containing elements of the same type:

  1. Using the element type followed by square brackets ([]):

    TS
    const numbers: number[] = [1, 2, 3];
const strings: string[] = ['a', 'b', 'c'];

  2. Using the generic Array<T> type:

    TS
    const numbers: Array<number> = [1, 2, 3];

Both syntaxes are fully valid, but the first one (type[]) is the conventional and most common style. If you try to insert an invalid value (e.g. numbers.push("hello") on a number[] array), TypeScript will generate a compile-time error.

Tuples (Fixed-Length Arrays)

A tuple is a special type of array that has a fixed number of elements where each element has a predefined specific type based on its position.

For example, to store an HTTP response made of a status code (number) and a message (string):

TS
const response: [number, string] = [200, 'OK'];

In this case:

  • The first element (response[0]) must be a number.
  • The second element (response[1]) must be a string.
  • The array must be initialized with exactly 2 elements.

Read-Only Tuples (readonly)

An important detail about tuples in TypeScript is that at runtime they are normal JavaScript arrays. This means that mutative methods like .push() or .pop() are technically available and could alter the tuple length, partially bypassing type checks.

To prevent this behavior and enforce true immutability, we can use the readonly modifier:

TS
const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!

Try it yourself

Exercise 1: Array of Numbers

Exercise#ts.m1.l2.e1
Attempts: 0Loading…

Declare an array named scores that contains only numbers and is initialized with the values 90, 85, and 95. Use the explicit type annotation for the array. Do not use the any type.

Loading editor…
Show hint

Use the syntax const scores: number[] = ... or Array<number>.

Solution available after 3 attempts

Exercise 2: 3D Coordinate Tuple

Exercise#ts.m1.l2.e2
Attempts: 0Loading…

Declare a tuple named point that represents a 3D coordinate (three numbers for X, Y, Z) and is initialized with the values 10, 20, 30. Use explicit type annotation.

Loading editor…
Show hint

The tuple type must be [number, number, number].

Solution available after 3 attempts

Exercise 3: Location Info Tuple

Exercise#ts.m1.l2.e3
Attempts: 0Loading…

Declare a tuple named locationInfo that represents a geographic coordinate with its name. It must contain: latitude (number), longitude (number) and the city name (string). Initialize it with the values 41.9028, 12.4964, and 'Rome'.

Loading editor…
Show hint

Use the syntax to define a tuple with three elements: [number, number, string].

Solution available after 3 attempts

Exercise 4: Log Entry Tuple

Exercise#ts.m1.l2.e4
Attempts: 0Loading…

Declare a tuple named logEntry representing a log line. It must contain in order: a timestamp (number), a severity level (string), and an error message (string). Initialize it with timestamp 1716300000, level 'INFO', and message 'Application started'.

Loading editor…
Show hint

Use the syntax to define a three-element tuple: [number, string, string] and assign the specified values.

Solution available after 3 attempts