How to Type an Array in TypeScript

What you’ll build or solve

You’ll type arrays of primitives, objects, mixed values, and nested lists. By the end, you’ll know how to express the element type clearly and avoid common mistakes with unions and empty arrays.

When this approach works best

This method works best when:

• You store lists of values like IDs, names, or API results.
• You want TypeScript to stop invalid pushes into arrays.
• You rely on map, filter, or reduce and want correct autocomplete.

Skip this if you are prototyping and do not care about type checking.

Prerequisites

• TypeScript installed
• Basic knowledge of arrays in JavaScript

Step-by-step instructions

Step 1: Type arrays of primitives

The core idea is to type the element, then add [].

constscores:number[]= [10,20,30];
constnames:string[]= ["Sam","Jordan","Alex"];

TypeScript now blocks incorrect values:

scores.push("40");

You may also see the equivalent Array<T> syntax in some codebases:

constids:Array<number>= [1,2,3];

Both forms mean the same thing. Pick one and keep it consistent.

If you want an array that cannot be mutated, add readonly to the array type:

constroles:readonlystring[]= ["admin","editor","viewer"];

What to look for

• Type errors when pushing the wrong type.
• Helpful autocomplete based on the element type.
• Readonly arrays block methods like push and pop.

Step 2: Type an array of objects

When each element is an object, define the object shape first.

typeTask= {
  id:number;
  title:string;
  completed:boolean;
};

consttasks:Task[]= [
  { id:1, title:"Learn TypeScript", completed:false },
  { id:2, title:"Ship a feature", completed:true },
];

What to look for

• Missing properties trigger errors.
• Wrong property types trigger errors.

Step 3: Type arrays that can hold multiple types

Use a union type for mixed arrays. Wrap the union in parentheses.

constvalues: (string|number)[]= ["one",2,"three"];

This fails:

values.push(true);

What to look for

• Parentheses are required for (A | B)[].
• If you forget parentheses, TypeScript reads it as a different type.

Step 4: Type nested arrays

Use T[][] for arrays of arrays.

constgrid:number[][]= [
  [1,2],
  [3,4],
];

Nested arrays are common for grouped data, tables, or matrix-like structures.

What to look for

• Each inner array must match the inner type.
• TypeScript enforces element types at both levels.

Examples you can copy

Example 1: API results list

interfaceUser {
  id:number;
  name:string;
}

constusers:User[]= [
  { id:1, name:"Sam" },
  { id:2, name:"Jordan" },
];

Example 2: Optional values inside arrays

consttags: (string|undefined)[]= ["news",undefined,"sports"];

constcleanTags=tags.filter((t):t is string =>t!==undefined);

Example 3: Tuple vs array

constpoint: [number,number]= [10,20];

A tuple has a fixed length and fixed positions, unlike number[].

Common mistakes and how to fix them

Mistake 1: Forgetting parentheses around a union type

What someone might do:

constmixed:string|number[]= [1,2,3];

Why it breaks:

This means “a string or an array of numbers,” not “an array of strings or numbers.”

Correct approach:

constmixed: (string|number)[]= [1,2,"three"];

Mistake 2: Using any[] and losing safety

What someone might do:

constitems:any[]= [];
items.push(1);
items.push("two");
items.push(false);

Why it breaks safety:

TypeScript stops checking what’s inside the array.

Correct approach:

constitems:number[]= [];

Or a union if needed:

constitems2: (number|string)[]= [];

Mistake 3: Mutating a readonly array

What someone might do:

constroles:readonlystring[]= ["admin"];
roles.push("editor");

Why it breaks:

Readonly arrays cannot be mutated.

Correct approach:

constroles2= [...roles,"editor"];

Troubleshooting

If TypeScript infers never[] for an empty array, add an explicit type:

constnumbers:number[]= [];

If you get confusing union errors, confirm you used parentheses like (A | B)[].

If a method is not available, check if the array is readonly or if the element type is a union that needs narrowing.

If object arrays error on properties, confirm each object includes the required fields with the correct types.

Quick recap

• Type the element, then add [], like string[] or number[].
• Array<T> means the same as T[].
• Use (A | B)[] for mixed element types.
• Type object arrays with a shared object type like Task[].
• Use T[][] for nested arrays.