Chapter 6: TypeScript Arrays

Part 1: The Basics – Two Ways to Write Arrays

TypeScript gives us two syntaxes for array types. They’re exactly the same in function, but different in style. Let me show you both:

Syntax 1: The Square Bracket Method (Most Common)

Syntax 2: The Generic Method (Also Common)

Which one should you use? It’s mostly personal preference. I tend to use number[] for simple types and Array<number> for complex types (we’ll see why later). The TypeScript team themselves use both.

The Magic of Inference

Here’s something beautiful – you often don’t need to write the type at all:

TypeScript looks at your array contents and says, “Ah, I see what you’re storing here!” This is type inference working its magic.

Part 2: Reading Arrays – TypeScript Knows What’s Inside

This is where TypeScript really starts to help you. Once it knows what’s in your array, it remembers:

This is huge! In JavaScript, fruits[3] is just undefined and trying to call toUpperCase() crashes your program. TypeScript catches this before it happens.

Part 3: Array Methods – Type Safety in Action

Every array method is fully typed. Watch how TypeScript protects you:

Adding Elements

Removing Elements

Transforming Arrays

Finding Elements

Part 4: Multi-Dimensional Arrays

Arrays can contain other arrays. TypeScript handles this beautifully:

Real-world example: Game board

Part 5: Readonly Arrays – Protection from Modification

Sometimes you want to promise that an array won’t be modified. TypeScript gives you readonly:

The as const trick

This is one of my favorite patterns:

Part 6: Tuples – Arrays with a Fixed Pattern

This is where arrays get really interesting. Tuples are arrays with a fixed length and known types at each position:

Basic Tuples

Optional Tuple Elements

Real-World Tuple Examples

CSV Data:

API Responses:

React useState (this is actually a tuple!):

---

Part 7: Advanced Array Patterns

Generic Array Functions

Type Predicates with Arrays

Discriminated Unions in Arrays

Part 8: Common Pitfalls and How to Avoid Them

Pitfall 1: The Empty Array

Pitfall 2: Mutating Readonly Arrays

Pitfall 3: Tuple Mutability

Pitfall 4: Array.isArray Type Narrowing

Part 9: Performance and Best Practices

Use const for Arrays That Don’t Change

Prefer map and filter Over Loops When Transforming

Be Explicit with Complex Nested Types

Part 10: A Complete Real-World Example

Let’s build something practical – a simple shopping cart system that demonstrates everything we’ve learned:

Summary: The TypeScript Array Philosophy

1. Be specific – Use tuples for fixed patterns, arrays for collections

2. Embrace immutability – Use readonly and as const when data shouldn’t change

3. Trust the inference – Let TypeScript figure out simple array types

4. Use generics – Write array functions that work with any type

5. Think in sets – Array types are just descriptions of possible values

Arrays in TypeScript aren’t just JavaScript arrays with types – they’re a completely different way of thinking about collections of data. Every bracket and method call is checked, every element is tracked, and every operation is verified.

This means fewer runtime crashes, better documentation (the types themselves tell you what’s allowed), and a much more pleasant development experience. Your future self, debugging at 2 AM, will thank you for using TypeScript arrays properly!

Does this help clarify TypeScript arrays? Would you like me to elaborate on any particular aspect or show more examples?