Arrays in TypeScript

Analogy categoryAnalogies

1. Introduction

Arrays in TypeScript are typed collections that hold multiple values of the same type. TypeScript adds compile-time guarantees that every element pushed, read, or iterated over matches the declared element type.

🏏

Cricket analogy: A team's batting lineup is a typed array of Batter[] — TypeScript ensures you can't accidentally push a bowler's equipment bag into the XI list when only batters belong there.

Arrays can be typed with two equivalent syntaxes, support multi-dimensional nesting, and can be marked read-only to prevent mutation.

🏏

Cricket analogy: A scoresheet can be written as Over[] or Array<Over> interchangeably, nested into a season's Over[][] for multiple matches, and locked as read-only once the match is officially closed and archived.

2. Syntax

typescript

let names: string[] = ["Alice", "Bob"];
let scores: Array<number> = [90, 85, 77];
let matrix: number[][] = [[1, 2], [3, 4]];
let locked: readonly number[] = [1, 2, 3];

3. Explanation

string[] and Array<string> are completely equivalent ways of typing an array of strings — the square-bracket form is more common and idiomatic, while the generic form is useful when combined with other generic types.

🏏

Cricket analogy: Writing a squad list as Player[] or Array<Player> gives the same result — the bracket form reads naturally on the team sheet, while the generic form shines when nesting inside Squad<Player> for multiple tournament rosters.

Multi-dimensional arrays are typed by stacking bracket pairs, e.g. number[][] for a 2D array. TypeScript also supports readonly T[] and ReadonlyArray<T>, which remove mutating methods like push, pop, and splice from the type.

🏏

Cricket analogy: A season's scores typed number[][] stack match scores inside a season array, and marking it readonly number[][] locks the archived scorecard so no one can push a fake run or splice out a wicket after the match ends.

T[] and Array<T> compile to the exact same JavaScript and are 100% interchangeable in terms of type checking — the choice between them is purely stylistic. Most style guides prefer T[] for simple element types and reserve Array<T> for more complex or generic element types, e.g. Array<{ id: number }>.

Declaring an array as readonly number[] only prevents mutation through that specific variable's type — it does not deep-freeze the array at runtime. Assigning it to a plain number[] variable (or using a type assertion) still allows push/pop to be called, because readonly is a compile-time-only guarantee, not a runtime lock like Object.freeze.

4. Example

typescript

let fruits: string[] = ["apple", "banana"];
fruits.push("cherry");

let total: number = 0;
let prices: number[] = [10, 20, 30];
for (const p of prices) {
  total += p;
}

console.log(fruits);
console.log(`Total: ${total}`);
console.log(fruits.length, prices.length);

5. Output

text

[ 'apple', 'banana', 'cherry' ]
Total: 60
3 3

6. Key Takeaways

Arrays can be typed as T[] or the equivalent generic form Array<T>.
Both syntaxes compile identically and are interchangeable.
Multi-dimensional arrays stack bracket pairs, e.g. number[][].
readonly T[] removes mutating methods at compile time but is not a runtime freeze.
TypeScript enforces that every element pushed or assigned matches the declared element type.