runtime.boot

Full Stack Systems
Production Mindset

CodeWithMihir

Engineering thoughtful products from interface to infrastructure.

CodeWithMihir

TypeScript Tutorial

TypeScript Arrays and Tuples Explained with Examples

Learn how to type arrays and tuples in TypeScript, including string arrays, number arrays, union arrays, readonly arrays, and fixed-length tuples.

Welcome back! I am Mihir, and in this lesson we will learn arrays and tuples in TypeScript.

Arrays store lists of values. Tuples store fixed-position values.


Array Type Syntax

There are two common ways to type arrays.

let scores: number[] = [90, 85, 100];
let names: string[] = ["Mihir", "Aarav", "Riya"];

You can also write:

let scores: Array<number> = [90, 85, 100];
let names: Array<string> = ["Mihir", "Aarav", "Riya"];

Both are valid. Most beginners prefer number[] and string[].


Type Checking Arrays

let scores: number[] = [90, 85, 100];

scores.push(95);

Invalid:

scores.push("excellent");

The array only accepts numbers.


Type Inference with Arrays

const courses = ["JavaScript", "TypeScript", "React"];

TypeScript infers:

string[]

For numbers:

const prices = [999, 1499, 2499];

TypeScript infers:

number[]

Mixed Arrays

If an array contains different types, TypeScript creates a union.

const values = [1, "two", true];

TypeScript infers:

(string | number | boolean)[]

You can write this explicitly:

let values: Array<string | number | boolean> = [1, "two", true];

Use mixed arrays only when they really make sense.


Arrays of Objects

type User = {
  id: number;
  name: string;
};

const users: User[] = [
  { id: 1, name: "Mihir" },
  { id: 2, name: "Aarav" },
];

Invalid:

users.push({ id: "three", name: "Riya" });

id must be a number.


Empty Arrays Need Annotations

This is often not enough:

const users = [];

Better:

type User = {
  id: number;
  name: string;
};

const users: User[] = [];

Now TypeScript knows what belongs in the array.


Readonly Arrays

Use readonly when an array should not be changed.

const roles: readonly string[] = ["admin", "editor", "viewer"];

Invalid:

roles.push("guest");

Readonly arrays are useful for configuration values and fixed options.


What is a Tuple?

A tuple is an array with fixed positions and known types.

let userEntry: [number, string] = [1, "Mihir"];

The first item must be a number. The second item must be a string.

Invalid:

userEntry = ["Mihir", 1];

The order matters.


Tuple Examples

Coordinates:

let position: [number, number] = [10, 20];

API result:

let result: [boolean, string] = [true, "Saved successfully"];

Name and age:

let profile: [string, number] = ["Mihir", 25];

Named Tuple Elements

You can make tuples easier to read with names.

type Coordinate = [x: number, y: number];

const point: Coordinate = [10, 20];

The names help documentation and editor hints.


Arrays vs Tuples

FeatureArrayTuple
LengthUsually flexibleUsually fixed
Item typesUsually same typeCan differ by position
Examplestring[][number, string]
Use caselist of userscoordinate pair

Common Mistake: Using Tuples for Complex Data

This is hard to read:

let user: [number, string, boolean] = [1, "Mihir", true];

For complex data, prefer an object:

type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

Objects are clearer when values have meaning.


Practice

Create typed arrays and tuples:

const lessonTitles: string[] = ["Types", "Arrays", "Objects"];
const scores: number[] = [90, 95, 88];
const coursePair: [number, string] = [1, "TypeScript"];

Try changing the tuple order and see what TypeScript says.


What You've Learned

You now understand:

  • How to type arrays
  • How TypeScript infers array types
  • How mixed arrays become union arrays
  • How to type arrays of objects
  • Why empty arrays often need annotations
  • How readonly arrays work
  • What tuples are
  • When to use arrays vs tuples

What's Next?

In the next lesson, we will learn Object Types in TypeScript.

We will describe object shapes, nested objects, methods, and reusable object types.


Need Help?

  • Have questions, confusion, or want to know more? Contact me

Arrays are for collections. Tuples are for fixed structure. That one distinction saves a lot of confusion.