TypeScript Tutorial: Arrays & Tuples
Typed arrays, readonly arrays, tuples, and working with array methods in TypeScript.
Array Type Syntax
Two equivalent ways to declare a typed array:
```typescript
let scores: number[] = [95, 87, 92];
let names: Array<string> = ["Alice", "Bob"];
```
---
Readonly Arrays
When an array shouldn't be modified after creation:
```typescript
const LANGUAGES: readonly string[] = ["go", "python", "typescript"];
const CODES: ReadonlyArray<number> = [200, 201, 204, 400, 404, 500];
// LANGUAGES.push("sql"); // Error: Property 'push' does not exist on type 'readonly string[]'
```
---
Tuples — Fixed-Length Typed Arrays
Tuples have a fixed length where each position has a specific type:
```typescript
type Point = [number, number];
type NamedPoint = [string, number, number];
type Result<T> = [T, null] | [null, Error];
const origin: Point = [0, 0];
const labeled: NamedPoint = ["center", 0, 0];
```
---
Array Methods with Types
TypeScript infers element types through array method chains:
```typescript
const products = [
{ name: "Go", price: 29 },
{ name: "TS", price: 49 },
{ name: "Rust", price: 59 },
];
// map returns { name: string; discounted: number }[]
const discounted = products
.filter(p => p.price > 30)
.map(p => ({ name: p.name, discounted: p.price * 0.8 }));
```
---
What's Next?
Next: **Objects** — typed objects, index signatures, and structural typing.
What you'll learn in this TypeScript arrays & tuples tutorial
This interactive TypeScript tutorial has 13 hands-on exercises. Estimated time: 18 minutes.
- Declaring typed arrays — TypeScript infers the element type of an array from its initial values. Once inferred, only matching values can be added…
- Array of objects — typed collections — When an array holds objects, TypeScript enforces the shape of every element. This is one of the most common patterns in …
- map — transform every element — `.map()` transforms an array, creating a new array of the same length. TypeScript infers the return array's type from yo…
- filter — select matching elements — `.filter()` returns a new array containing only elements where the callback returns `true`. TypeScript preserves the ele…
- reduce — accumulate a result — `.reduce()` accumulates a result by running a callback for each element. The accumulator type must be annotated when it …
- find and findIndex — locate elements — `.find()` returns the first matching element (or `undefined`). TypeScript knows the return type is `T | undefined`, forc…
- sort — sort in place with a comparator — `.sort()` sorts an array in place. For non-string arrays, you must provide a comparator function. TypeScript ensures the…
- flat and flatMap — working with nested arrays — `.flat()` flattens nested arrays. `.flatMap()` combines map and flat in one step. Both are useful for working with API r…
- Tuples — fixed-length typed arrays — A tuple is an array where the length and type of each position are fixed. TypeScript enforces both the length and the ty…
- Readonly arrays — immutable collections — `readonly T[]` prevents mutation — no push, pop, splice, or sort. Use it for constants and data that shouldn't change.
- Array spread and rest — combining arrays — The spread operator `...` unpacks an array. It's used to combine arrays, pass array elements as arguments, and create co…
- every and some — testing array conditions — `.every()` returns true if ALL elements pass the test. `.some()` returns true if ANY element passes. Both short-circuit …
- Type guards with arrays — narrowing element types — When an array contains a union type, you can use type guards inside array methods to narrow the type and work safely wit…
TypeScript Arrays & Tuples concepts covered
- Array Type Syntax
- Readonly Arrays
- Tuples — Fixed-Length Typed Arrays
- Array Methods with Types
- What's Next?