Arrays en tupels

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

   Kopieer

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

2. Using the generic Array<T> type:

   TS

   Kopieer

   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):

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:

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

Try it yourself

Exercise 1: Array of Numbers

Exercise 2: 3D Coordinate Tuple

Exercise 3: Location Info Tuple

Exercise 4: Log Entry Tuple