Arrays, Tuples & Readonly Modifiers

1. Typed Data Collections

In JavaScript, arrays can hold mixed data types indiscriminately. TypeScript allows you to enforce strict element types on array lists and fixed-length Tuples.

2. Array Syntax

Define arrays using type[] or generic Array<type> syntax:

const scores: number[] = [95, 82, 88];
const usernames: Array<string> = ["Alex", "Sarah", "Maria"];

// Union arrays
const mixedList: (string | number)[] = ["DevLoom", 100];

3. Tuples: Fixed-Length & Position-Typed Arrays

A Tuple is a specialized array with a fixed number of elements where each position has a specific data type:

// Tuple: [HTTPCode, StatusMessage]
type ResponsePair = [number, string];

const okResponse: ResponsePair = [200, "OK"];
const notFound: ResponsePair = [404, "Not Found"];

// Invalid tuple assignment:
// const badResponse: ResponsePair = ["OK", 200]; // Error: Type string is not assignable to type number

4. Readonly Modifiers

Prevent array mutation by marking arrays or tuples as readonly:

const immutableCoordinates: readonly [number, number] = [37.7749, -122.4194];

// immutableCoordinates[0] = 0; // Error: Cannot assign to read-only property
// immutableCoordinates.push(10); // Error: Property 'push' does not exist on readonly tuple

5. Common Mistakes

• Tuple Push Trap: In JavaScript runtime, calling .push() on a non-readonly tuple passes compile checks unless marked with readonly! Always use readonly for strict immutable tuples.
• Confusing Array of Unions with Union of Arrays: (string | number)[] means an array containing strings and numbers, whereas string[] | number[] means an array of ALL strings OR an array of ALL numbers!

6. Next Steps

Use tuples for structured fixed pairs. Next, let's explore Object Types and Type Aliases!