Arrays, Tuples & Readonly Modifiers

Type Inference & Literal Types (const vs. let)

Discover how TypeScript infers types automatically and how let versus const declarations shape wide types versus narrow literal types.

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!